Не может получить доступ к вложенным объектам, но может отобразить не вложенные объекты из API (используя ловушки React)

Question

Я немного озадачен этой проблемой, с которой я столкнулся, пытаясь отобразить данные из API. Странно то, что я успешно извлек данные и могу отобразить значения свойств в массиве, но в тот момент, когда он становится вложенным свойством в массиве, он возвращает неопределенное значение. Вы случайно не знаете почему?

        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

useFetch () имеет следующий вид:

  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 };

Сообщение об ошибке:

TypeError: Невозможно прочитать свойство 'temp' из неопределенного

Полученные данные выглядят так:

{
    "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
}