Tengo un método AuthProvider y useAuth que devuelve useContext(AuthContext) dentro de mi archivo raíz de App.js, sin embargo, si consola.log el valor de retorno de useAuth() en App.js, no está definido, ¿por qué? En cualquier otro componente secundario como la página de inicio de sesión, se muestra un authContext.

mi aplicación.js:

 import { AuthProvider, useAuth } from './providers/AuthProvider' function App() { const auth = useAuth() console.log({ auth }) //undefined??

Proveedor de autenticación.js:

 import React, { useContext, useState, useEffect } from 'react' import { app, auth, firestore, storage } from '../firebase' const AuthContext = React.createContext() export function useAuth() { return useContext(AuthContext) } export function AuthProvider({ children }) { const [currentUser, setCurrentUser] = useState(undefined) const [loginError, setLoginError] = useState(null) const login = async (email, password) => { try { return auth.signInWithEmailAndPassword(email, password) } catch (error) { setLoginError(error) } } const logout = () => auth.signOut() useEffect(() => { const unsubscribe = auth.onAuthStateChanged(user => { setCurrentUser(user) }) return unsubscribe }, []) const value = { loginError, login, signup, logout, currentUser, app, firestore, storage, auth, } return <AuthContext.Provider value={value}>{children}</AuthContext.Provider> }