tags after {children} being duplicated in react app – Blancer.com Tutorials and projects

i have a layout

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <PageHeader />
        <main className="flex flex-col items-center justify-between pt-24">
          {children}
        </main>
        <PageFooter />
      </body>
    </html>
  );
}

and a page using that

export default function Home() {
  return (
    <RootLayout>
      <ImageCarousel />
      <About />
      <PortfolioSection />
      <TestimonialSection />
      <NewBlogSection />
      <ContactFormSection />
    </RootLayout>
  );

but when the page loads everything after the {children} is duplicated an there is the run time error Error: Hydration failed because the initial UI does not match what was rendered on the server.
which looking into doesn’t seem to help all that much

regardless of what is passed as a child in as children into the rootlayout it happends