"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { getPricingPage } from "@/sanity/queries/page";
import { WebsiteForm } from "@/components/sections";

export const PricingPage = async () => {
 const [open, setOpen] = useState(false);
 const data = await getPricingPage();
 const { hero, subscription, price } = data;
return (
 <>
   <div>
     <div className="flex flex-col space-y-6 items-center md:space-y-12">
       <Button onClick={() => setOpen(true)}>Click Me</Button>
     </div>
   </div>
   <WebsiteForm open={open} onOpenChange={setOpen} />
 </>
);
};

export default PricingPage;

I am building this NextJs app with sanity, and I am trying to fetch the data from Sanity, and it was working just fine before, but then, I added the useState hook to open the WebsiteForm, and I am receiving an error every time I click on the button saying “async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding 'use client' to a module that was originally written for the server.”
I do understand what the error implies, but fixing it is the problem.
Your help would be extremely appreciated. Thanks in advance.