Can't access the nested objects but can render the non-nested ones from API (using React hooks) - reactjs

Question

I'm a bit stumped on this problem I encountered trying to render the data from an API. Weird thing is I successfully fetched the data and I can render the values of properties in the array but the moment it becomes a nested property within an array it returns undefined. Do you by any chance know why?
location[0] + '&lon=' +
location[1] + '&APPID=8e6150cf719d58fc8062d507eaba92c0'
const [data, loading] = useFetch(url);
console.log(data.main.temp) // returns undefined
console.log(data.name) // logs name
The useFetch() is the following:
useEffect(() => {
async function fetchUrl() {
const response = await fetch(url);
const json = await response.json();
setData(json);
setLoading(false);
}
fetchUrl();
}, [url]);
return [data, loading];
}
export { useFetch };
The error message is:
TypeError: Cannot read property 'temp' of undefined
Data fetched looks like this:
{
"coord": {
"lon": 2.18,
"lat": 41.42
},
"weather": [
{
"id": 800,
"main": "Clear",
"description": "clear sky",
"icon": "01n"
}
],
"base": "stations",
"main": {
"temp": 293.81,
"pressure": 1013,
"humidity": 77,
"temp_min": 292.04,
"temp_max": 294.82
},
"visibility": 10000,
"wind": {
"speed": 2.6,
"deg": 120
},
"clouds": {
"all": 0
},
"dt": 1561061585,
"sys": {
"type": 1,
"id": 6414,
"message": 0.0074,
"country": "ES",
"sunrise": 1561004254,
"sunset": 1561058875
},
"timezone": 7200,
"id": 3124932,
"name": "el Clot",
"cod": 200
}