hi i'm using this pattern in my project
https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#supported-pattern-passing-server-components-to-client-components-as-props

but when i follow this guide, the warning below is show up!

 warning
Warning: Failed prop type: Invalid prop `children` supplied to `ForwardRef(Box)`, expected a ReactNode.

how can i handle it?

these are my code

- Mobile is client component
- ShoppingCartComponent is server compoenent

        <Mobile>
          <ShoppingCartComponent />
        </Mobile>

// mobile code

'use client';

export default function Mobile({ children }: { children: React.ReactNode }) {
  return (
        <Box display="flex" justifyContent="space-between" alignItems="center" width="100%">
          <IconButton
            onClick={toggleDrawerExpansion}
            sx={{ mr: 2, display: { xs: 'block', sm: 'none' } }}
          >
            <MenuIcon />
          </IconButton>
          <Link href="/" className="qwarty__logo">
            <QwartyLogo width={80} />
          </Link>
          <Box display="flex">
            <AccountComponent />
            {children}
          </Box>
        </Box>
  );
}

// shopping cart component code

export default async function ShoppingCartComponent() {
  const cartId = cookies().get('cartId')?.value;
  let cart;
  if (cartId) {
    cart = await getCart(cartId);
  }

  return (
    <Link href="/cart">
      {!cart ? null : (
        <div className="absolute right-1 top-1 inline-flex h-4 w-4 items-center justify-center rounded-full bg-primary p-2 text-xs font-bold text-white lg:right-4 lg:top-2">
          {cart.totalQuantity}
        </div>
      )}
      <ShoppingCartIcon
        className={`h-${headerIconSize} w-${headerIconSize} text-black transition-transform duration-500 hover:scale-105 hover:fill-primary hover:text-primary`}
      />
    </Link>
  );
}