While using Multiple context in react hooks getting blank - reactjs

Question

I am new to context api. I am trying to use multiple context.
I have created a UserContext and GlobalContext which I'm trying to use in the app.js but as soon as I put UserContext I get the blank page.
here is my app.js
import { useEffect } from 'react';
import { GlobalProvider } from './context/GlobalState'
import './App.css'
import { Home } from './pages/Home';
import { Login } from './pages/Login';
import { Register } from './pages/Register';
import axios from 'axios';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { UserProvider } from './context/UserContext';
const App = () => {
return (
<UserProvider>
<GlobalProvider>
<BrowserRouter>
<Routes>
<Route path='/login' element={<Login />} />
<Route path='/register' element={<Register />} />
<Route path='/home' element={<Home />} />
</Routes>
</BrowserRouter>
</GlobalProvider>
</UserProvider>
)
}
export default App;
Here is my UserContext.js
import axios from "axios";
import { createContext, useReducer } from "react";
import { userReducer } from "./AppReducer";
// Initial State
const initialState = {
isAuthenticated: false
}
// Creating Context
export const UserContext = createContext(initialState)
UserContext.displayName = "UserContext"
// Creating Provider
export const UserProvider = ({ childern }) => {
const [state, dispatch] = useReducer(userReducer, initialState);
// Actions
async function authenticate(user) {
try {
const config = {
Headers: {
'Content-Type': 'application/json'
}
}
const hasToken = res.data.token === undefined ? false : res.data.token;
dispatch({
type: 'AUTHENTICATE_USER',
payload: hasToken
})
const res = await axios.post('https://localhost:7188/api/user/authenticate', user, config);
if (res.data.token !== undefined) {
console.log("No token")
}
else {
console.log(res.data.token);
}
localStorage.setItem('jwt', res.data.token);
console.log(localStorage.getItem('jwt'));
} catch (error) {
console.log(error.response);
}
}
return (
<UserContext.Provider value={
{
isAuthenticated: state.isAuthenticated,
authenticate
}
}>
{childern}
</UserContext.Provider>
)
}
Here is AppReducer.js
export const userReducer = (state, action) => {
switch (action.type) {
case 'AUTHENTICATE_USER':
return {
...state,
isAuthenticated : action.payload
}
default:
return state;
}
}
When I start the server I'm getting blank page