Uso firebase v9 y creé un gancho de reacción para verificar convenientemente la autorización del usuario. Después de la autorización, no puedo cerrar sesión en la página como si el método signOut() no funcionara

firebase.ts

 import { initializeApp } from "firebase/app"; import {getAuth} from "firebase/auth"; const firebaseConfig = { apiKey: process.env.REACT_APP_FIREBASE_API_KEY, authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN, projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID, storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET, messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID, appId: process.env.REACT_APP_FIREBASE_APP_ID }; const app = initializeApp(firebaseConfig); export const auth = getAuth();

useAuth.ts

 import {useEffect, useState} from "react"; import {onAuthStateChanged, User} from "firebase/auth"; import {auth} from "../firebase"; export const useAuth = () => { const [isLoggedIn, setIsLoggedIn] = useState(false); const [user, setUser] = useState<User | null>(null); useEffect(() => { const subscriber = onAuthStateChanged(auth, (userInfo) => { if (userInfo) { setIsLoggedIn(true); setUser(userInfo); } else { setIsLoggedIn(false); setUser(null); } }); return () => { subscriber(); } }, []); return { user, isLoggedIn, }; }

HomePage.ts

 import React from 'react'; import {signOut} from "firebase/auth"; import {Navigate} from "react-router-dom"; import {useAuth} from "../hooks/useAuth"; import {auth} from "../firebase"; const HomePage = () => { const { isLoggedIn } = useAuth(); const handleLogOut = () => { signOut(auth) .then(r => console.log(r)) // undefined .catch(); }; return ( {isLoggedIn} ? <div> <h1>Welcome</h1> <button onClick={handleLogOut}> Log Out </button> </div> : <Navigate to='/login' /> ); }; export default HomePage;

Al mismo tiempo, cuando actualizo la página, la sesión no se restablece y permanezco en la página de inicio. ¿Qué estoy haciendo mal?