useNavigate redirecting but not loading

the URL shows that it is login page but everything is white, and when I reload it loads the page.
in the console says that many variables from the previous page are null, it seems like it's still on the previous page. why is this happening?
The previous page and the code:

import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import '../styles/UserProfile.css'
import { useAuth } from '../services/authContext'

export default function UserProfile() {
  const { currentUser, logout } = useAuth()
  const navigate = useNavigate()
  const [errorMessage, setErrorMessage] = useState(null)

  async function handleLogout() {
    try {
      await logout()
      navigate("/login")
    } catch (error) {
      console.log(error)
      setErrorMessage('An error ocurred when trying to logout')
    }
  }

  return (
    <div className="container profile">
      <div className="profile">
        <h1>Profile</h1>
        {errorMessage && (
          <div className="error-container">
            <strong>{errorMessage}</strong>
          </div>
        )}
        <div className="row">
          <h3>Email</h3>
          <p>{currentUser.email}</p>
        </div>
        <div className="row">
          <a>Change email</a>
        </div>
        <div className="row">
          <a>Reset password</a>
        </div>
        <button onClick={handleLogout}>Logout</button>
      </div>
    </div>
  )
}

and when i click logout this happens:


when i reload it loads normally

useAuth code:

import React, { createContext, useContext, useEffect, useState } from 'react'
import {
  createUserWithEmailAndPassword,
  onAuthStateChanged,
  signInWithEmailAndPassword,
  signOut,
} from 'firebase/auth'
import { auth } from '../firebase'

const AuthContext = createContext()

export function useAuth() {
  return useContext(AuthContext)
}

export function AuthProvider({ children }) {
  const [currentUser, setCurrentUser] = useState()

  function signUp(email, password) {
    return createUserWithEmailAndPassword(auth, email, password)
  }

  function login(email, password) {
    return signInWithEmailAndPassword(auth, email, password)
  }

  function logout() {
    return signOut(auth)
  }

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, user => {
      setCurrentUser(user)
    })
    return unsubscribe
  }, [])

  return (
    <AuthContext.Provider
      value={{
        signUp: signUp,
        login: login,
        logout: logout,
        currentUser: currentUser,
      }}
    >
      {children}
    </AuthContext.Provider>
  )
}

login code:

import React, { useState } from 'react'
import { useAuth } from '../services/authContext'
import { useNavigate, Link } from 'react-router-dom'
import Header from '../components/Header'

export default function Login() {
  const { login } = useAuth()
  const navigate = useNavigate()
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [loading, setLoading] = useState(false)
  const [errorMessage, setErrorMessage] = useState(null)

  async function handleSubmit(element) {
    element.preventDefault()

    setLoading(true)

    if (password.length < 6) {
      setErrorMessage('The password need to have at least 6 characters!')
      setLoading(false)
      return
    }

    try {
      await login(email, password)
      navigate('/')
    } catch (error) {
      setErrorMessage('An error occured when trying to login')
    }
    setLoading(false)
  }

  return (
    <div className="container">
      <Header />
      <h2>Login</h2>
      {errorMessage && (
        <div className="error-container">
          <strong>{errorMessage}</strong>
        </div>
      )}
      <form onSubmit={handleSubmit}>
        <label>Email</label>
        <input
          type="email"
          value={email}
          onChange={e => setEmail(e.target.value)}
        />

        <label>Password</label>
        <input
          type="password"
          value={password}
          onChange={e => {
            setPassword(e.target.value)
          }}
        />
        <button disabled={loading} className="button-block" type="submit1">
          Login
        </button>
      </form>

      <div className="center">
        <p>
          ForgotPassword ? <Link to="/forgot-password">Reset password</Link>
        </p>
        <p>
          Don't have an account ? <Link to="/signup">Create account</Link>
        </p>
      </div>
    </div>
  )
}

i consoled log currentUser and currentUser.email before logout, and it's not null, this happens after logging out.

UserProfile.jsx:32:1 is <p>{currentUser.email}</p>. As far as I can tell it appears the currentUser object is nullified and the UserProfile component is rerendered at least once prior to the navigation action being effected to navigate the user to the "/login" path. The UserProfile component falls over when attempting to access currentUser.email when currentUser is null.

You should place a guard on the UI to only render valid content when currentUser is non-null.

Example:

export default function UserProfile() {
  const { currentUser, logout } = useAuth();
  const navigate = useNavigate();
  const [errorMessage, setErrorMessage] = useState(null);

  async function handleLogout() {
    try {
      await logout();
      navigate("/login");
    } catch (error) {
      console.log(error);
      setErrorMessage('An error ocurred when trying to logout');
    }
  }

  if (!currentUser) {
    return <div>No Current user. Log in.</div>;
  }

  return (
    <div className="container profile">
      <div className="profile">
        <h1>Profile</h1>
        {errorMessage && (
          <div className="error-container">
            <strong>{errorMessage}</strong>
          </div>
        )}
        <div className="row">
          <h3>Email</h3>
          <p>{currentUser.email}</p>
        </div>
        <div className="row">
          <a>Change email</a>
        </div>
        <div className="row">
          <a>Reset password</a>
        </div>
        <button onClick={handleLogout}>Logout</button>
      </div>
    </div>
  )
}