Wrapping app component with contextProvider component makes the webpage empty

This is the AppContext.jsx file content:

import { createContext } from "react";

export const AppContext = createContext()

export const AppContextProvider = (props) => {

    const value = {

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

This is the app.jsx file content:

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

This is the main.jsx file:

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>,
  
)

When I remove <AppContextProvider> component the webpage content shows up again. What's going on? there're no errors in my console

You misspelled children in AppContext.jsx {props.childern} instead of {props.children}.