Context api , getting empty array

Question

I am using context api , but when I fetch data from backend and try to send it to child component , it doesnt seem to work , console logs an empty array .

import {MyApiUrl} from './services/httpService'


export const GlobalState = createContext()

export const DataProvider = ({children}) =>{

    const [categories, setCategories] = useState([])


    const getCategories = async () =>{
        const res = await http.get(MyApiUrl+'/api/jobCategory');
        setCategories({categories:res.data})
    }

useEffect( ()=>{

    getCategories()

},[])

    const mystate = {
      
        categoriesAPI: categories

    
    }
  
   


console.log(categories)
    return (
        <GlobalState.Provider value={mystate}>
            {children}
        </GlobalState.Provider>
    )
}

now in one of the child components which is class

static contextType = GlobalState

  async  componentDidMount(){
   
   
    const mystate = this.context
console.log(mystate,'hey')        //  >>>>>>> ITS NOT CONSOLE LOGGING THE VALUE HERE 

}