Javascript – How to display the current user display name in firebase using react

I’m trying to display the current user’s name in my sidebar component in react.
I tried this so far.

import {auth, dataBase} from '../firebase-config.js';

function Sidebar() {
    const [firebaseUserInfo, setFirebaseUserInfo] = useState(auth.currentUser);

  return (
    <div className='sidebar-container'>
        <header>
          <p>{firebaseUserInfo.displayName}</p>
        </header>
    </div>
  );
}

it seemed to work at first, but after stepping away, and coming back to refresh the app I get this error now.

Cannot read properties of null (reading 'displayName')
TypeError: Cannot read properties of null (reading 'displayName') 

How can I fix this problem. and render the user’s name?

edit:
as requested this is the my signIn.js that allows firebase to auth users.

this is the imports

import React, {useState, useEffect} from 'react';
import {auth, googleProvider, facebookProvider, twitterProvider, githubProvider} from '../firebase-config.js';
import {signInWithPopup, signInWithEmailAndPassword} from 'firebase/auth';
import Cookies from 'universal-cookie';

this the google firebase auth provider function

  const signInWithGoogle = async () => {
    try{
      const result = await signInWithPopup(auth, googleProvider);
      console.log(result);
      cookies.set("auth-token", result.user.refreshToken);
      setIsSignIn(true);
      }
    catch (err){
      console.error(err);
    }           
  }

here is the firebase-config.js file that houses all the firebase variables and commends.

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import {getAuth, GoogleAuthProvider, createUserWithEmailAndPassword, FacebookAuthProvider, TwitterAuthProvider, GithubAuthProvider} from 'firebase/auth';
import {getFirestore} from 'firebase/firestore';
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: "AIzaSyCtiHPj2f0IB389CHZSkc0cAOCBkYf7RFw",
  authDomain: "my-chat-app-5b0ae.firebaseapp.com",
  projectId: "my-chat-app-5b0ae",
  storageBucket: "my-chat-app-5b0ae.appspot.com",
  messagingSenderId: "837847743265",
  appId: "1:837847743265:web:cc6c4987efbf7fe47b5c60",
  measurementId: "G-CXEMWS349E"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
export const auth = getAuth(app)
export const googleProvider = new GoogleAuthProvider();
export const facebookProvider = new FacebookAuthProvider();
export const twitterProvider = new TwitterAuthProvider();
export const githubProvider = new GithubAuthProvider();
export const dataBase = getFirestore(app)

also here is a link to my current code on github
https://github.com/rsteward117/Chat-App/tree/main/src