Whenever i sign in a user and get redirected to the right component and then reload the browser, i get an error saying "TypeError: Cannot read properties of null (reading 'email')" because i'm trying to render the logged in user that i can see at first but not after i refresh the page.

Is there anyone who can point out what i'm doing wrong?

My Context

useEffect(() => {
    onAuthStateChanged(auth, (data) => {
      if (data) {
        // User is signed in
        setisSignedIn(true);
        setCurrentUser(data);
        console.log('state = definitely signed in');
        console.log(currentUser);
      } else {
        // User is signed out
        setisSignedIn(false);
        console.log('state = definitely signed out');
      }
    });
  }, [isSignedIn, currentUser]);

Signing in a user

const signInUser = (props: ISignIn) => {
    signInWithEmailAndPassword(auth, props.email, props.password)
      .then((user) => {
        setFirebaseError(false);
        navigate('/swipe');
      })
      .catch((error) => {
        setFirebaseError(true);
        setErrorMsg({ errorMessage: error.message, errorCode: error.code });
        navigate('/');
      });
  };

Using currentUser

import { useAuth } from '../Utils/Contexs/AuthContext';

export const SwipeView = () => {
  const { currentUser, signOutUser } = useAuth();
  return (
    <div>
      <h1>Swipe View</h1>
      <p>The current user logged in: {currentUser.email}</p>
      <button onClick={() => signOutUser()}>Log out</button>
    </div>
  );
};

Console.log's

Console error