electron-vite firebase onAuthStateChanged

[south ocean]

I implement a login system from electronic-vite to firebase, but if I create a login implementation system with onAuthStateChanged, I only get a white screen when I run electronic, is there a solution?

Below is the code I wrote.

import { Navigate, Outlet } from "react-router-dom";
import { useAuth } from "../provider/AuthProvider";

const PrivateRoutes = () => {

    const { user } = useAuth();

    if (!user) {
        return <Navigate to="/login" />
    }
    return <Outlet/>
};

export default PrivateRoutes;

import { onAuthStateChanged, User } from "firebase/auth";
import { createContext, ReactNode, useContext, useEffect, useState } from "react";
import { auth } from "../firebase";
import storage from "electron-json-storage";
import { useNavigate } from "react-router-dom";

interface Type { user: User | null, loading: boolean }

const AuthContext = createContext<Type>({ user: null, loading: true });


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

const AuthProvider = ({ children }: { children: ReactNode }) => {

    const [user, setUser] = useState<User | null>(null);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        const navigate = useNavigate();
        const subscriber = onAuthStateChanged(auth, (user) => {
            if (user) {
                setUser(user);
                setLoading(false);
                storage.set("user", { email: user.email, uid: user.uid }, err => console.log(err))
            } else {
                setUser(null);
                storage.remove("user", (err) => console.log(err));
                setLoading(true);
                navigate("/login");
            }
            setLoading(false);
        });
        return () => subscriber();
    }, []);

    if (loading) return <a>Loading</a>;

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

export { useAuth, AuthProvider }