Unable to pass access_token to endpoint in Reactjs

I am trying to fetch data from an API which requires access_token. There is another API for fetching access_token. So, I am first trying to fetch acess_token and then pass it to the API which returns data.

I observed that the token API is getting hit but by the time it is passed to the data API, token is undefined

Here is my code

const useFetch = (url, headers) => {
    const [data, setData] = useState([]);
    const [loading, setLoading] = useState(true);
      useEffect(async () => {
        const response = await fetch(url, headers)
        const data = await response.json()
        console.log(data)
        setData(data)
        setLoading(false)
      },[]);
      return {data, loading};
  }
export default function CreateTestcaseStep2() {
    var access_token_headers={
        method : 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        body : 'grant_type=something&client_id=something-test&client_secret=something&scope=something'
      }
    const {token, loading_token} = useFetch('ACCESS_TOKEN_API', access_token_headers)
    console.log("token is ", token) // TOKEN IS PRINTED AS UNDEFINED HERE
    var api_headers={ method: 'GET',
      headers: {'Authorization': `Bearer ${token.access_token}`},
    }
    const {data, loading} = useFetch('DATA_API', api_headers)
}

Please suggest how to get access_token first and then pass it to data_api.