I'm using firebase auth+firestore to authenticate the users. After logging in, I want to display the user name on navbar.
I've stored the user data in a context like this:

// user-context.tsx
// import ...

interface IUser {
  authUser: FirebaseAuthUser;
  data: DocumentData;
}

export const UserContext = React.createContext<IUser | null>(null);

export function UserProvider({ children }: { children: React.ReactNode; }) {
  const firebaseAuth = useAuth();
  const firebaseFirestore = useFirestore();
  const [ user, setUser ] = React.useState<IUser | null>(null);

  React.useEffect(() => {
    onAuthStateChanged(firebaseAuth, async _user => {
      if (_user) {
        const _firestoreFetchedUserDocumentSnapshot = await getDoc(doc(collection(firebaseFirestore, 'users'), _user.uid));
        if (_firestoreFetchedUserDocumentSnapshot.exists()) {
          setUser({ authUser : _user, data : _firestoreFetchedUserDocumentSnapshot.data()});
        } else { throw new Error('Unexpected data received from firestore'); }
      } else { setUser(null); }
    });
  }, [ firebaseAuth.currentUser ]);

  return <UserContext.Provider value={user}>{children}</UserContext.Provider>;
}

export function useUser() {
  return React.useContext(UserContext);
}

This refreshes the UserContext as soon as the auth state changes (i.e. user logs in or out).

I want to use this context inside my navbar to get the user details to display them.
Currently this is my navbar implementation:

// navbar.tsx
// import ...

export default function Navbar() {
  const user = useUser();

  return (
    <Box display="flex" alignItems="center">
      { !user ? <Button marginX={1}>Login</Button> : <Text fontSize="xl">Hi, {user.data.firstName}</Text> }
    </Box>
  );
}

This doesn't make it refresh though whenever the user in the context changes. How do I achieve that?