Envolver o componente do aplicativo com o componente contextProvider torna a página da web vazia

Este é o AppContext.jsxconteúdo do arquivo:

import { createContext } from "react";

export const AppContext = createContext()

export const AppContextProvider = (props) => {

    const value = {

    }
    
    return (
        <AppContext.Provider value={value}>
            {props.childern}
        </AppContext.Provider>
    )
}

Este é o app.jsxconteúdo do arquivo:

import React from 'react'
import { Route, Routes } from 'react-router-dom'
import Home from './pages/student/Home'
import CoursesList from './pages/student/CoursesList'

function App() {

  return (
    <>
      <div>
      <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
    <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/course-list' element={<CoursesList />} />
      </Routes>
    
      </div>
      
    
    </>
  )
}

export default App

Este é o main.jsxarquivo:

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
import { AppContextProvider } from './context/AppContext.jsx'
import { BrowserRouter } from 'react-router-dom'

createRoot(document.getElementById('root')).render(

 <BrowserRouter>
    <AppContextProvider>
      <App />
    </AppContextProvider>
  </BrowserRouter>,
  
)

Quando eu removo <AppContextProvider>o componente o conteúdo da página da web aparece novamente. O que está acontecendo? Não há erros no meu console