Hi everyone,
I'm new to NextJS and have been having a bit of trouble regarding state management between sibling client components. I am essentially trying to conditionally render a component in my layout, however, I wish to be able to control it using my NavBar. However, as the Layout component is always a server one, I haven't been able to figure out how to transfer and update state between the two.

Here is my code:

// layout .tsx
import React from 'react'
import Topnav from '../components/Topnav'
import NewPostForm from '../components/NewPostForm'

export default function Layout({ children }: {children: React.ReactNode}) {
  return (
    <>
    <Topnav/>
    <NewPostForm isOpen={false}/>
    <main>{children}</main>
    </>
  )
}

// topnav.tsx
import Link from 'next/link'
import React from 'react'

function Topnav() {
  return (
    <nav className=''>
        <ul className='flex flex-row gap-4 text-lg font-bold p-2 border-white border-b-2'>
            <Link href={"/"}>Home</Link>
            <Link href={"/posts"}>Posts</Link>
            <li className='ml-auto'>Login</li>
            <li>New post</li>
        </ul>
    </nav>
  )
}

export default Topnav

// newpostform.tsx
import React from 'react'
interface NewPostFormProps {
    isOpen: boolean;
}

function NewPostForm(props: NewPostFormProps) {
    if (!props.isOpen) {
        return;
    }
  return (
    <form action="">
        <input type="text" placeholder='Title'/>
        <textarea name="" id="" placeholder='Content'></textarea>
    </form>
  )
}

export default NewPostForm