Firebase Authentication: Cannot destructure property 'user' – Reactjs

I am getting this errors in console

Uncaught TypeError: Cannot destructure property ‘user’ of ‘(0 , hooks_use_auth_listener__WEBPACK_IMPORTED_MODULE_3_.default)(…)’ as it is undefined.

and

The above error occurred in the <App> component:

at App (http://localhost:3000/static/js/bundle.js:46:75)

I don’t know what the problem is but i cant see any of the pages in the localhost.

App.js

import { lazy, Suspense } from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import * as ROUTES from "./constants/routes";
import UserContext from "./context/user";
import useAuthListener from "./hooks/use-auth-listener";

const Login = lazy(() => import("./pages/login"));
const SignUp = lazy(() => import("./pages/signup"));
const Dashboard = lazy(() => import("./pages/dashboard"));
const NotFound = lazy(() => import("./pages/notfound"));

function App() {
const { user } = useAuthListener();

return (
<UserContext.Provider value={{ user }}>
<Router>
<Suspense fallback={<p>Loading...</p>}>
<Routes>
<Route path={ROUTES.LOGIN} element={<Login />} />
<Route path={ROUTES.SIGN_UP} element={<SignUp />} />
<Route path={ROUTES.DASHBOARD} element={<Dashboard />} />
<Route element={<NotFound />} />
</Routes>
</Suspense>
</Router>
</UserContext.Provider>
);
}

export default App;

index.js

import React from "react";
import { createRoot } from "react-dom/client";
import App from "./App";
import firebaseContext from "./context/firebase";
import { app, FieldValue } from "./lib/firebase";
import "./styles/app.css";

createRoot(document.getElementById("root")).render(
<firebaseContext.Provider value={{ app, FieldValue }}>
<App />
</firebaseContext.Provider>
);

firebase.js

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

//here want to import the seed file

import { seedDatabase } from "../seed";

const config = {
apiKey: "api-key",
authDomain: "auth-domain",
projectId: "project-id",
storageBucket: "storage-bucket",
messagingSenderId: "messaging-sender-id",
appId: "app-id"
};

const app = firebase.initializeApp(config);
const { FieldValue } = firebase.firestore;

//here want to call the seed file (only ONCE)
seedDatabase(app);

export { app, FieldValue };

use-auth-listener.js

/* eslint-disable react-hooks/exhaustive-deps */
// Checks if a user is logged in or Logged out.

import { useState, useEffect, useContext } from "react";
import firebaseContext from "../context/firebase";

export default function useAuthListener() {
const [user, setUser] = useState.apply(
JSON.parse(localStorage.getItem("authUser"))
);
const { firebase } = useContext(firebaseContext);

useEffect(() => {
const listener = firebase.auth().onAuthStateChanged((authUser) => {
if (authUser) {
// We have an authuser so we can store the user in localStorage.
localStorage.setItem("authUser", JSON.stringify(authUser));
setUser(authUser);
} else {
// We don't have an authuser so we clear the localStorage.
localStorage.removeItem("authUser");
}
});

    return () => listener();

}, [firebase]);
}