Firebase authentication state not persisting after page refresh? [duplicate]

I’m familiarizing myself with Firebase authentication and routing using ReactJS. I have a simple app that logs in using Google and redirects to a welcome page that displays the users account name. It seems to work fine, but when I refresh the page on the /fish-feed route, the “auth.currentUser.displayName” variable becomes undefined. I have 2 questions:

1. Why doesn’t the state of my auth variable persist after refreshing the page?

2. How can I redirect the user to the /fish-feed page if they’re already logged in? (Instead of having to click the “Sign in with Google” button each time)

Thanks in advance!!

App.js

import './App.css';
import { Login } from "./pages/Login.js";
import { Fishfeed } from "./pages/Fishfeed.js";
import { BrowserRouter, Routes, Route } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path = "/" element = { <Login/> } />
        <Route path = "/fish-feed" element = { <Fishfeed/> } />
      </Routes>
    </BrowserRouter> 
  );
}

export default App;

Fishfeed.js:

import { auth } from "../config/firebase.js";
import { signOut } from "firebase/auth";
import { useNavigate } from 'react-router-dom';

export const Fishfeed = () => {

    const navigate = useNavigate();

    const userSignOut = async () => {
        try{
            await signOut(auth);
            navigate('/');
        } catch (err){
            console.log(err);
        }
    }

    return (
        <>
        <div>
            Welcome, { auth.currentUser.displayName }
        </div>
        <button onClick = { userSignOut }>Sign Out</button>
        </>
    )

}

Login.js:

import { GoogleLoginButton } from "react-social-login-buttons";
import { auth, googleProvider } from "../config/firebase.js";
import { signInWithPopup } from "firebase/auth";
import { useNavigate } from 'react-router-dom';

export const Login = () => {

    const navigate = useNavigate();

    const signInWithGoogle = async () => {
        try {
            await signInWithPopup(auth, googleProvider);
            navigate('/fish-feed');  
        } catch (err) {
            console.log(err);
        }
    }
 
    return (
        <div>
            <GoogleLoginButton onClick={ signInWithGoogle }>
                Sign in with Google
            </GoogleLoginButton>
        </div>
    )
    
}

firebase.js:

import { initializeApp } from "firebase/app";
import { getAuth, GoogleAuthProvider } from "firebase/auth";

const firebaseConfig = {
  apiKey: "AIzaSyD0s4MBhAIw5_NhYPFc6zLbfs1XgqzYa1E",
  authDomain: "fish-feed-7f3db.firebaseapp.com",
  projectId: "fish-feed-7f3db",
  storageBucket: "fish-feed-7f3db.appspot.com",
  messagingSenderId: "605426810955",
  appId: "1:605426810955:web:26d601db2ddd2bfa884dce",
  measurementId: "G-499EZVR2WJ"
};

// Initialize Firebase for fish-feed 
const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const googleProvider = new GoogleAuthProvider();