Context api problem (page unresponsive when reloads or in the incognito)

I was trying to implement context api to my react project. But whether I put my file under the context my project becomes unresponsive and page hangs.

My App.js file

import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import Home from './pages/Home/Home';
import Footer from './pages/Footer/Footer';
import AuthProvider from './context/AuthProvider';

function App() {
  return (
    <div className="App">
      <AuthProvider>
      <Home></Home>
      <Footer></Footer>
      </AuthProvider>
    </div>
  );
}

export default App;

Context provider file(AuthProvider.js)

import React, { createContext } from 'react';
import useFirebase from '../hooks/useFirebase';

export const AuthContext = createContext();
const AuthProvider = ({children}) => {
    const allValues = useFirebase();
    return (
        <AuthContext.Provider value={allValues}>
            {children}
        </AuthContext.Provider>
    );
};


export default AuthProvider;

useAuth.js file

import { useContext } from "react"
import { AuthContext } from "../context/AuthProvider"

const useAuth = () =>{
    return useContext(AuthContext);
};

export default useAuth;

useFirebase.js file , Here I used to write down functions with firebase authentication . And user observer.

import firebaseInitialize from "../Firebase/firebase.init";
import { signInWithEmailAndPassword, GoogleAuthProvider, getAuth, signInWithPopup, onAuthStateChanged, signOut, createUserWithEmailAndPassword,  updateProfile  } from "firebase/auth";
import { useEffect, useState } from "react";

firebaseInitialize()
const useFirebase = () => {
    const auth = getAuth();
    const [user, setUser] = useState({});
    const [error, setError] = useState('');
    const [authError, setAuthError] = useState('');
    const [isLoading, setIsLoading] = useState(true);

    const googleProvider = new GoogleAuthProvider();

    const registerUser = (email, password, name, navigate) => {
      setIsLoading(true);
      createUserWithEmailAndPassword(auth, email, password)
        .then((userCredential) => {
          setAuthError('');
          const newUser = { email, displayName: name };
          setUser(newUser);

          // send name to firebase after creation
          updateProfile(auth.currentUser, {
            displayName: name
          })
          .then(() => {})
          .catch((error) => {});
          navigate('/');
        })
        .catch((error) => {
          setAuthError(error.message);
        })
        .finally(() => setIsLoading(false));
    };

    // email sign in 
    const emailSignIn = (email, password) =>{
        return signInWithEmailAndPassword(auth, email , password);
      };

    // Google sign in
    const googleSignIn = (location, navigate) => {
        setIsLoading(true);
        signInWithPopup(auth, googleProvider)
          .then((result) => {
            setAuthError('');
            const destination = location?.state?.from || '/';
            navigate(destination);
          }).catch((error) => {
            setAuthError(error.message);
          }).finally(() => setIsLoading(false));
      };

    // Observer user on auth change
    useEffect(() => {
        onAuthStateChanged(auth, (user) => {
          if (user) {
            setUser(user);
          } 
          else {
            setUser({})
          }
          setIsLoading(false);
        });
      }, [auth, user]);

    // Logout 
    const logOut = () => {
        setIsLoading(true);
        signOut(auth)
          .then(() => {
            setUser({});
          })
          .catch((error) => {
            setError(error.message);
          })
          .finally(() => setIsLoading(false));
      };

    return {registerUser, emailSignIn, googleSignIn, logOut, user, error, authError, isLoading};
};

export default useFirebase;