Need to trigger useNavigator() if a user is logged in, or display an imported UI component if not.

I've setup the browser routes from my App.js :

The Home page routes to "/"

Another Page is rendered at "/app".

Let me know if I should provide more details. Thanks for the Help!

    import React from "react"
    import '../App.css';
    import {HeroLayout3} from "../ui-components"
    import { Auth, Hub } from 'aws-amplify';

    import { useNavigate } from "react-router-dom";

    export function Home() {
      let navigate = useNavigate()
      return (
        Auth.currentAuthenticatedUser({
          bypassCache: true }).then(() => navigate('/app')).catch(<HeroLayout3                 
      width="100vw" height="79vh"/>)
      );
    }

    export default Home;