Hydration issues when using props.children inside component

 return (
    <Router
      root={(props) => (
        <MetaProvider>
          <QueryClientProvider client={queryClient}>
            <Title>Schizophrenia poll</Title>
            <ErrorBoundar>
              <Suspense>
                <NavBar />
                <TransitionSlideGlobal>{props.children}</TransitionSlideGlobal>
              </Suspense>
            </ErrorBoundary>
          </QueryClientProvider>
        </MetaProvider>
      )}>
      <FileRoutes />
    </Router>
  );

return (
    <>
      <Transition>
        {props.children}
      </Transition>
      <Transition
   
        <Show when={vis()}>
          <Footer />
        </Show>
      </Transition>
    </>
  );