I'm new to Nextjs but I've managed to build my first complete app. I am trying to create a sidebar that opens and closes on smaller devices. So, the button to open and close will be seen in the navbar and the side bar, I need to pass the props from a parent page.

I am having an issue because the main page where my sidebar and navbar component is has an async function that I can't make into client side rendering. I tried converting the function but then get a black screen in the app.

this is a snippet of the page code:

const ChatPage = async ({params: {chatId}}: Props) => {
const{userId} = await auth();

if (!userId) {
return redirect('/sign-in');
}
const _chats = await db.select().from(chats).where(eq(chats.userId, userId))
console.log(_chats)
if (!_chats){
return redirect('/');
}
if (!_chats.find((chat) => chat.id === parseInt(chatId))){
return redirect('/');
}
const currentChat = _chats.find((chat) => chat.id === parseInt(chatId));
const isPro = await checkSubcription();

return (
<div className="flex h-screen">
<div className="flex w-full h-screen">
{/* chat sidebar /}
<div className="flex-[1] max-w-xs">
<ChatSideBar chats={_chats} chatId={parseInt(chatId)} isPro={isPro} />
</div>
{/ pdf viewer /}
<div className='flex flex-col w-full h-screen divide-y'>
<div className='flex w-full '>
<DashNavHeader />
</div>
<div className='flex flex-row h-screen w-full'>
<div className="hidden md:block flex-[2]">
<PDFViewer pdf_url={currentChat?.pdfUrl || ''} />
</div>
{/ chat component */}
<div className='flex-[2] border-l-4 border-l-slate-200'>
<ChatComponent chatId={parseInt(chatId)} />

</div>
</div>
</div>
</div>
</div>
)
};
export default ChatPage

I want to add simple useState:

const [open, setOpen] = React.useState(false);

<Button className={${open ? "block md:hidden": "hidden" }} onClick={() => setOpen(!open)}>