Solid.js does not render children in a `<For>` loop correctly

type CartProps = {
  cartIcon: JSX.Element;
  trashIcon: JSX.Element;
};

const Cart: Component<CartProps> = (props) => {
  const cartItems = useStore(cartItemsStore);

  return (
    <Sheet>
      <SheetTrigger class="relative">
        {props.cartIcon}
        {cartItems().length > 0 && (
          <div class="absolute top-1 right-1 -mt-2 -mr-2 bg-red-500 text-white text-xs rounded-full w-4 h-4 flex items-center justify-center">
            {cartItems().reduce((acc, item) => acc + item.quantity, 0)}
          </div>
        )}
      </SheetTrigger>
      <SheetContent>
        <For each={cartItems()}>
          {(item) => (
            <div class="w-full p-2 flex justify-between">
              <div class="grid grid-flow-col gap-4">
                <p class="grid-cols-1">{item.title}</p>
                <p class="grid-cols-1 text-neutral-600">x{item.quantity}</p>
              </div>
              <div>
                {/* problem is happening here */}
                <button class="text-neutral-500">{props.trashIcon}</button>
              </div>
            </div>
          )}
        </For>
      </SheetContent>
    </Sheet>
  );
};