Getting the client component async error: how to rewrite this Next.js client component with useEffect? [closed]

I'm currently following a Next.js/Sanity CMS course on Udemy. I ran into an error that the lecturer doesn't address while working on the product page that appears after you click on a particular product on the home page.

The error says:

page is an async Client Component. Only Server Components can be async at the moment. This error is often caused by accidentally adding 'use client' to a module that was originally written for the server

app\product\[slug]\page.tsx:

'use client' import { useParams } from 'next/navigation'; import { Navbar, ProductDetails } from '../../components'; import { client } from '@/sanity/lib/client'; import { groq } from 'next-sanity'; const page = async () => { const {slug}:any = useParams(); const products = await client.fetch(groq `*[_type=="product"]`); const product = products.find((product:any)=>product.slug.current == slug); return ( <> <Navbar/> <ProductDetails product={product}/> </> ) } export default page

app\components\ProductDetails.tsx:

import React from "react"; const ProductDetails = ({product}:any) => { return ( <div>{product.name}</div> ) } export default ProductDetails

Some solutions are listed on this page.

I can't make page.tsx a server component because we are using useParams().

I want to implement the second solution 'Using use with Context Provider', but all the attempts I've made to implement it fail and I have become stuck.

I also have attempted to utilize the third solution but I am not sure of how to formulate the syntax.

How could I rewrite it with either the second or third solution?