React js context returns undefined - reactjs

Question

I want to pass some data to all of my react components for that I have created a context called GlobalContex that wraps all the components. Now this GlobalContex takes data into its prop from MainComponent.
When I console.log this data inside GlobalContext I can see the data in the browser's console but when I consume this data in one of the GlobalContext child component and console, it returns undefined.
Here is my code
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
Console From Global Context
{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"
Sidebar.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