React Router v6 navigate to the homepage when logged in

I’m using Firebase v9 and react-router v6. I haven’t used v6 and now I’m confused as to how I can redirect the user to the homepage when logged in. Also, how can I make it where the guest user can only access the login page. Only users who were logged in can access the homepage and other pages.

import { auth } from "./Firebase/utils";

function App() {
  let navigate = useNavigate();
  const user = auth.currentUser;

  console.log(user);

  if (user) {
    // User is signed in, see docs for a list of available properties
    // https://firebase.google.com/docs/reference/js/firebase.User
    // ...
    navigate("/Homepage");
    console.log("logged");
  } else {
    // No user is signed in.
    console.log("2");
  }

  return (
    <div>
      <div>
        <Routes>
          <Route
            path="/"
            element={
              <Layout>
                <LogInPage />
              </Layout>
            }
          />

          <Route path="/Homepage" element={<Homepage />} />
          <Route path="/Profile" element={<Profile />} />
        </Routes>
      </div>
    </div>
  );
}

export default App;

This is what the console.log(user) shows:

Package.json file: