How do I make Reactjs access deeply nested data from a json response? I’m getting a TypeError when I try to access them

I am currently learning react and I’m trying to use real-world APIs’ as a data source for my react app. I am using an API which provides a json response as follows.
json response from the API
When I try to console.log the info, I am able to print it out, but using it in the app is giving me this error
error message while trying to fetch data.
for example, I am trying to fetch JSON.data.cards[0].groupedCard.cardGroupMap.RESTAURANT.cards[0].card.card.info.id But the app is complaining that it’s not defined.

While I was going through other responses, I did figure out to have an await for the promise to resolve and then set it to the variable.

const data = await fetch(“LINK_TO_API”);
const json = await data.json();

I am able to access the data through console.log, but not able to use it within my application.