Q: What is the correct way to "clearCurrentUser" on a React/firebase app? I'm building a react firebase app in which users can create their own profiles, sign in and add & delete meetups. Its currently doing something very weird in that, whenever I'm signed in as lets say user 1, I see said users email in the profile on the dashboard and their meetups. However, when I sign out user 1 and then sign in user 2, upon login I still see user 1's profile. Then I refresh the page, and waa-lah... now user 2's profile appears, but only after a page refresh and I am confused as to how to fix it as I have tried many different fixes.  here is my firebase.js where I'm handling AuthContext and setting current user (this is the latest try, the commented out lines are what I had before now) using firebase  v9.7.0
import { initializeApp } from "firebase/app";
import { getAuth, onAuthStateChanged } from "firebase/auth";

import {
  getFirestore,
  collection,
  query,
  where,
  getDocs,
} from "firebase/firestore";

// import firebase from "firebase/compat/app";
// import "firebase/compat/firestore";
// import "firebase/compat/auth";

import { useState, useEffect, useContext, createContext } from "react";

const firebaseConfig = {
  apiKey: "******************",
  authDomain: "***************",
  projectId: "***************",
  storageBucket: "****************",
  messagingSenderId: "************",
  appId: "******************",
};

export const app = initializeApp(firebaseConfig);
export const firestore = getFirestore(app);
// export const app = firebase.initializeApp(firebaseConfig);
// export const firestore = firebase.firestore();
// const auth = app.auth();
const auth = getAuth();
export const AuthContext = createContext();

export const useAuthState = () => {
  return useContext(AuthContext);
};
export const AuthContextProvider = ({ children }) => {
  const [currentUser, setCurrentUser] = useState();
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      if (user) {
        // User is signed in, see docs for a list of available properties
        // https://firebase.google.com/docs/reference/js/firebase.User
        setCurrentUser(user);
        setLoading(false);
        // ...
      } else {
        console.log("user logged out");
        setCurrentUser({});
        // User is signed out
        // ...
      }
      unsubscribe();
    });
    // const unsubscribe = auth.onAuthStateChanged((user) => {
    //   setCurrentUser(user);
    //   setLoading(false);
    // });
    // console.log(unsubscribe());
    // return () => unsubscribe();
  }, []);
  const value = {
    currentUser,
  };

  // useEffect(() => {
  //   setCurrentUser(auth.currentUser);
  //   setLoading(false);
  // }, []);

  return (
    <AuthContext.Provider value={value}>
      {!loading && children}
    </AuthContext.Provider>
  );
};
export default firestore;

And here is my Dashboard.js which handles the logout:
import React, { useState } from "react";
import { Card, Button, Alert } from "react-bootstrap";
import { getAuth, signOut } from "firebase/auth";
import { Link, useNavigate } from "react-router-dom";
import { useAuthState } from "../firebase";

export default function Dashboard() {
  const [error, setError] = useState("");
  const { currentUser } = useAuthState();
  const navigate = useNavigate();

  async function handleLogout() {
    setError("");

    try {
      await signOut(getAuth());
      sessionStorage.removeItem("token");
      navigate("/login");
    } catch {
      setError("Failed to log out");
    }
  }

  return (
    <>
      <Card>
        <Card.Body>
          <h2 className="text-center mb-4">Profile</h2>
          {error && <Alert variant="danger">{error}</Alert>}
          <strong>Email: </strong> {currentUser.email}
          <Link to="/update-profile" className="btn btn-primary w-100 mt-3">
            Update Profile
          </Link>
        </Card.Body>
      </Card>
      <div className="w-100 text-center mt-2">
        <Button variant="link" onClick={handleLogout}>
          Log Out
        </Button>
      </div>
    </>
  );
}

I'm thinking I need to clear the current user somewhere, but I'm not exactly sure if or where. Any guidance would be greatly appreciated, thank you!

A: In Firebase.js created the auth context and the logout function, and exports useAuth and the values as children.
// import signout function from firebase
import { 
    signOut, 
} from 'firebase/auth'

// create auth context
const AuthContext = React.createContext()
export function useAuth() {
    return useContext(AuthContext)
}

// singout function
async function logout() {
  return signOut(auth)
}

// values for when we use "const { value } = useAuth();"
const value = {
  currentUser,
  login,
  signup,
  logout
}

In Dashboard.js we set the variable of logout after adding it to the exported values.
// import auth context
import { useAuth } from '../app/Firebase';

// set logout variable
const { logout } = useAuth();

// handle logout
async function handleLogout() {
  setError("");

  try {
    await logout();
    navigate("/login");
  } catch {
    setError("Failed to log out");
  }
}

