React Fetch data and save it in global state via context API

Is it a good idea to create a global state using the react context api and fetch data and save it in the context object so the child components can access the data. Or it's better to fetch data in the root component and pass it to children via props.

If the global state using context api better, how do I fetch data and save it in the global state because fetch function is async and I've been using React useEffect to work around it.

Here is a snippet of my global state

import React from "react";

const GlobalState = React.createContext(null);

const socket = 'http://localhost:5000/';

const fetch_all_users = () => {
    fetch(socket + 'get_users_data')
        .then(response => response.json())
        .then(json => {
            console.log(json)
        })
        .catch(error => {
            console.log(error);
        });
}

const fetch_all_doors = () => {
    fetch(socket + 'get_doors_data')
        .then(response => response.json())
        .then(json => {
            console.log(json)
        })
        .catch(error => {
            console.log(error);
        });
}