any idea why this doesn't work in a client component? ```tsx "use client"; import { formatPrice, toTitleCase } from "@/lib/utils"; import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"; import { Separator } from "@/components/ui/separator"; import { Breadcrumbs } from "@/components/pagers/breadcrumbs"; import { Container } from "@/components/containers/mainContainer"; import { ProductImage } from "@/components/product-image"; import { Button } from "@/components/ui/button"; import { useCollectionListingFetch } from "@/api/products/collection.listing.query"; import { notFound } from "next/navigation"; interface ProductPageProps { params: { productId: number; }; } export default function ProductPage({ params }: ProductPageProps) { const { data: product } = useCollectionListingFetch().useProductByCollectionId(params.productId); console.log("🚀 - file: page.tsx:27 - ProductPage - initialData:", product); if (!product) { return notFound; } return (...) } ```