I'm currently trying to create a cart/checkout project, and used as some kind of example, the code available at verce/commerce repo, specifically [this file](https://github.com/vercel/commerce/blob/main/components/cart/cart-context.tsx).

In this example, everything work perfectly fine, and in my env too.
The problem is, when I start to split a little bit more the code in components, so it can be more organized and less template atached to the files.

example that works:

 {cart?.lineItems.map((item) => (
    <div className="flex flex-col gap-2" key={item.lineItemIndex}>
      <p>LineItemIndex: {item.lineItemIndex}</p>
      <div>
        <p>Quantity: {item.quantity}</p>
        <IncreaseQuantityButton
          optimisticUpdate={updateCurrentCartItem}
          lineItemIndex={item.lineItemIndex}
          quantity={item.quantity}
        />
        <DecreaseQuantityButton
          optimisticUpdate={updateCurrentCartItem}
          lineItemIndex={item.lineItemIndex}
          quantity={item.quantity}
        />
      </div>
    </div>
  ))}

Example that don't work:

{cart?.lineItems.map((item) => (
  <LineItem
    key={item.lineItemIndex}
    lineItemIndex={item.lineItemIndex}
    quantity={item.quantity}
  />
))}

any ideas? or solutions that I can apply to make it work properly between childrens or other contexts?