broken dinamic page react quey

"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 (...)
}

"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 (...)
}