Dynamically rendering content inside the header component with Next.js

Question

I have the following setup as the layout for an application in Next.js using the app router. The problem that I have that I am unable to find a solution which doesn't give an error inside the header component.

The header component has two parts. One is the server content which has to be fully server side, since it has to read the session to access information about the user (normal user avatar menu).

The other part is the dynamic content which allows the user to change the title of the main content, therefore it has to be client side in order for it useState() or contexts to be used and inherited by the main content.

This is how the server content currently looks like:

export default async function AvatarMenu() {
  const { session } = await getUserAuth();
  // deal with the session and the user menu
}

export function ServerContent() {
  return (<>
    <Notifications />
    <AvatarMenu />
    { /* etc.. */ }
  </>);
}

Then it is put into the header component:

export function Header() {
  return (<>
    <ServerContent />
    { /* This is where <DynamicContent /> should be, but can't in this circumstance */ }
  </>);
}

This is how I would like the dynamic content to work:

"use client"
// ...
type DynamicContentProps = {
  title: string,
  setTitle: (title: string) => void
};
export function DynamicContent(props: DynamicContentProps) {
  const [isEditable, setIsEditable] = useState<boolean>(false);
  function handleClick() {
    setIsEditable(true);
    // ...
  }

  return (<>
   <h2 onClick={handleClick} contentEditable={isEditable}>{props.title}</h2>
  </>);
}

type MainContentProps = {
  params: { slug: string }
}
export default async function MainContent(props: MainContentProps) {
  const content = await queryContentById(props.params.slug);

  // I have to render the full content here
  return (<>
    <Header /> { /* I can't both modify the dynamic content and render the server-component */ }
    <Content content={content} />
   </>);
}

I hope the problem is understandable, I had a hard time describing it.