Firebase not able to remember the user after refresh. Firebase Persistence not working

Question

This is the context

export default function UserAuthProvider({ children }) {
  const [user, setUser] = useState(null);

  async function logIn(email, password) {
    try {
      await setPersistence(auth, browserLocalPersistence);
      return signInWithEmailAndPassword(auth, email, password);
    } catch (error) {
      console.log(error.message);
    }
  }

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
      setUser(currentUser);
    });
    return () => {
      unsubscribe();
    };
  }, []);

  return (
    <UserAuthContext.Provider value={{ user, logIn }}>
      {children}
    </UserAuthContext.Provider>
  );
}

and this is the protected route that i am using to show the Home page of my app

function Protected({ children }) {
  const { user } = useContext(UserAuthContext);
  console.log(user);
  if (!user) {
    return <Navigate to="/login" />;
  }
  return <div>{children}</div>;
}

but even after this the moment i refresh my page i get logged out. *please help me