Pass authed user data to protected routes

const RouteGuard: ParentComponent = (props) => {
  const user = true; //Fetch User
  const navigate = useNavigate();
  if (!user) {
    navigate("/auth/sign-in");
  }
  return (
      <>{props.children}</>
  );
};

const AuthWrapper: ParentComponent = (props) => (
  <AuthProvider>{props.children}</AuthProvider>
);

const App: Component = () => {
  return (
    <Router>
      <Route path="/auth" component={AuthLayout}>
        <Route path="sign-in" component={SignInUp} />
      </Route>
        <Route path="/" component={RouteGuard}>
          <Route path="/home"  component={() => <AuthWrapper><Home/></AuthWrapper>} />
        </Route>
    </Router>
  );
};

const App: Component = () => {
  return (
    <Router>
      <Route path="/auth" component={AuthLayout}>
        <Route path="sign-in" component={SignInUp} />
      </Route>
      <Route path="/" component={RouteGuard}>
        <AuthWrapper>
          {/* All routes in here can access the validated user data */}
          <Route path="/home" component={Home} />
        </AuthWrapper>
      </Route>
    </Router>
  );