Реагировать js контекст возвращает неопределенный

Question

Я хочу передать некоторые данные всем моим реагирующим компонентам, для этого я создал контекст с именем GlobalContex, который охватывает все компоненты. Теперь этот GlobalContex принимает данные в prop из MainComponent.

Когда я console.log эти данные внутри GlobalContext, я вижу данные в консоли браузера, но когда я использую эти данные в один из дочерних компонентов и консоли GlobalContext возвращает неопределенное значение.

Вот мой код

MainComponent. js

import React from 'react';
import Header from "./Header";
import Sidebar from "./Sidebar";

import {
    Route,
    BrowserRouter
} from "react-router-dom";
import UserIndex from "../user/UserIndex";
import TrackerIndex from "../tracker/TrackerIndex";
import AuthUserContextProvider from '../../contexts/AuthUserContext';
import GlobalContextProvider from "../../contexts/GlobalContext";

const MainComponent = (props) => {

    const global_data = JSON.parse(props.testProp);

    return (
        <BrowserRouter>
            <div id="wrapper" className="menu-displayed">

                <GlobalContextProvider global_data={global_data}>

                    <div className="prd-container">

                        <Header/>

                        <div className="content">
                            <Route path="/users" component={UserIndex}/>
                            <Route path="/tracker" component={TrackerIndex}/>
                        </div>

                    </div>

                    <Sidebar/>

                </GlobalContextProvider>

            </div>
        </BrowserRouter>
    );

};

export default MainComponent

GlobalContext. js

import React, {createContext, useState, useEffect} from 'react'

export const GlobalContext = createContext();

const GlobalContextProvider = (props) => {

    const [context_global_data, setGlobalData] = useState([]);

    useEffect(() => {
        setGlobalData(props.global_data)
    },[])


    console.log(context_global_data);
    return (
        <GlobalContext.Provider value={{context_global_data}}>
            {props.children}
        </GlobalContext.Provider>
    )
}

export default GlobalContextProvider

Консоль из глобального контекста

{auth_user: {…}, login_url: "http://127.0.0.1:8000/login", logout_url: "http://127.0.0.1:8000/logout"}
auth_user: {id: 1, name: "Dust Value", email: "dustvalue@dustvalue.com", profile_pic: "dummy.jpg", email_verified_at: null, …}
login_url: "http://127.0.0.1:8000/login"
logout_url: "http://127.0.0.1:8000/logout"

Боковая панель. js

import React, {useContext, useState, useEffect} from 'react';
import {NavLink, Link} from 'react-router-dom';
import GlobalContext from "../../contexts/GlobalContext";


const Sidebar = (props) => {

    const global_data = useContext(GlobalContext);

    useEffect(() => {
        console.log(global_data);
    })


    return (
        <div>
             Sidebar
        </div>
    )
export default Sidebar