I want to make a layout for a set of pages, take the Navbar of the root layout.
I tried this:

import RootLayout from '@/app/layout';

export default function TestLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return <RootLayout>{children}</RootLayout>;
}

but I get the following hydration error
Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Expected server HTML to contain a matching <div> in <div>.

See more info here: https://nextjs.org/docs/messages/react-hydration-error

Component Stack
div
div


It works when I do, but then I dont have the RootLayout:

export default function TestLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return <>{children}</>;
}