HydrationBoundary fails to work when the layout itself is wrapped around HydrationBoundary component

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  const queryClient = new QueryClient()
  const token = await getToken()

  await queryClient.prefetchQuery({
    queryKey: ['organizations'],
    queryFn: async () => (await getOrganizations({ token })).unwrap(),
  })

  return (
    <div className="w-full h-screen">
      <HydrationBoundary state={dehydrate(queryClient)}>
        {children}
      </HydrationBoundary>
    </div>
  )
}

export default async function Projects({
  params: { organizationId },
}: {
  params: { organizationId: string }
}) {
  const queryClient = new QueryClient()

  await queryClient.prefetchQuery({
    queryKey: ['projects', organizationId],
    queryFn: async () => {
      const token = await getToken()
      const projectsResult = await getProjects({
        token,
        organizationId,
      })

      const projectsData = projectsResult.unwrap()

      return projectsData
    },
  })

  return (
    <HydrationBoundary state={dehydrate(queryClient)}>
      <ProjectsPage />
    </HydrationBoundary>
  )
}