Estoy tratando de usar el enlace useContext por primera vez y no aparece el nombre en la pantalla, nunca antes había usado useContext, por lo que agradeceré una pequeña explicación de mi error. Aquí está el código: (editar: agregado App.js)

AuthContext.js

 const AuthContext = createContext() export default AuthContext; export const AuthProvider = ({children}) => { return ( <AuthContext.Provider value={{'name':"Dennis"}}> {children} </AuthContext.Provider> ) }

Encabezado.js

 import React, { createContext, useContext } from 'react' import { Link } from 'react-router-dom' import AuthContext from '../context/AuthContext' const Header = () => { let { name } = useContext(AuthContext) return ( <div> <Link to="/">Home</Link> <span> </span> <Link to="/login">Login</Link> <h1>Hello {name}</h1> </div> ) } export default Header

Aplicación.js

 import './App.css'; import { BrowserRouter, Routes, Route, } from "react-router-dom"; import HomePage from './pages/HomePage'; import LoginPage from './pages/LoginPage'; import Header from './components/Header'; import PrivateRoute from './utils/PrivateRoute' import AuthProvider from './context/AuthContext'; function App() { return ( <div className="App"> <BrowserRouter> <AuthProvider> <Header /> <Routes> <Route path="/" element={ <PrivateRoute> <HomePage /> </PrivateRoute>} /> <Route path="/login" element={<LoginPage />} /> </Routes> </AuthProvider> </BrowserRouter> </div> ); } export default App;

he añadido la captura de pantalla de error