While using Multiple context in react hooks getting blank

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