Estoy realizando una barra de navegación, la cual tiene una foto del usuario y su nombre, estos datos los obtiene de firebase auth, cuando cargo la pagina por primera vez me trae la información de forma correcta, pero al refrescarla me trae que los datos del usuario son null
import React, { useEffect, useState } from 'react'
import { getAuth } from "firebase/auth";
export default function Sidenav() {
const [photoURL, setPhotoURL] = useState('');
const [displayName, setDisplayName] = useState('');
useEffect(() => {
getUserData()
}, []);
function getUserData() {
const auth = getAuth();
const user = auth.currentUser;
setPhotoURL(user.photoURL !== null ? user.photoURL : "");
setDisplayName(user.displayName !== null ? user.displayName : "");
};
return ()
}