I'm working with Astro and Svelte to compose a page with a product that has multiple variations. The user can select which variation they want and it'll be added to a Svelte store.

This works fine in a Svelte world, where you click the button and it adds a single product depending on which button you click REPL for this example.

However, when I render the page with Astro, and use the same Svelte component, it adds both products to the cart:

<script>
    export let products = [
        {
            id: 1,
            description: "this is a product",
            prices: [
                {
                    id: 1,
                    nickname: '10g',
                    unit_amount: 1.00,
                 },
                {
                    id: 2,
                    nickname: '20g',
                    unit_amount: 2.00
                 }
            ]
        },
        {
            id: 2,
            description: "this is another product",
            prices: [
                {
                    id: 3,
                    nickname: '80g',
                    unit_amount: 18.00
                  }
            ]
        }
    ];
</script>

    <main>
            {product.description && (<p>{product.description}</p>)}
            {product.prices.data.map(price => (
                <div class="card lg:card-side card-bordered">
                    <div class="card-body">
                        <h2 class="card-title">{price.nickname}</h2> 
                        <p>{toCurrency(price.unit_amount)}</p>
                        <div class="card-actions">
                            <AddToCart propsData={price} product={product} client:load />
                        </div>
                    </div>
                </div> 
            ))}
        </main> 

(Please see Svelte REPL for <AddToCart />)

Any ideas how I get the expected behaviour? Bonus points for helping me to understand why this is happening in Astro ...