Почему возникает ошибка, при удачном запросе на сервер?

Здравствуйте, подскажите из-за чего возникает ошибка, написано что data не доступна, хотя как я понимаю запрос на сервер происходит при полном рендеринг компоненто, как можно обойти это

import React from 'react';

import LocationInput from '../locationInput/LocationInput';

import { useState, useEffect } from 'react';

import weatherServices from '../server/weather-services';

import './MainBlock.scss';

const MainBlock = () => {

const [data, setData] = useState({}); 
const [city, setCity] = useState('miami');

const {getWeather} = weatherServices();


useEffect(() => {
    getWeather(city)
    .then(res => setData(res))
    .catch(err => console.error(err));
}, [city]);

const onCityChange = (city) => {
    setCity(city);
}

return (
    <>
        <section className='main-block'>
            <div className="main-block_title">{data.name}</div>
            <div className="main-block_temperature">{Math.floor(data.main.temp)}<span className='prefix'>℃</span></div>
            <div className="main-block_info">
                <div className="info-block">
                    <span className="info-block_title">pressure</span>
                    <span className="info-block_value">{data.main.pressure}</span>
                </div>
                <div className="info-block">
                    <span className="info-block_title">humidity</span>
                    <span className="info-block_value">{data.main.humidity}%</span>
                </div>
                <div className="info-block">
                    <span className="info-block_title">wind</span>
                    <span className="info-block_value">{data.wind.speed} km/h</span>
                </div>
            </div>
        </section>
        <LocationInput onCityChange={onCityChange}/>
    </>
);

};

export default MainBlock;

//////////////////

const weatherServices = () => { const _apiKey = 'ea44567e6275914944aec1cc0fd91921';

const getWeather = async(city) => {
    const res = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=ea44567e6275914944aec1cc0fd91921`);
    return await res.json();
}

return {getWeather};

}

export default weatherServices;

/////////

import React from 'react'; import { useState } from 'react';

import './LocationInput.scss';

const LocationInput = ({onCityChange}) => {

const [inputValue, setInputValue] = useState('');


const onChangeValue = (e) => {
    setInputValue(e.target.value);
}

const onSubmit = () => {
    onCityChange(inputValue);
    console.log(inputValue);
    setInputValue('');
}

return (
    <form onSubmit={onSubmit}>
        <input type="text" 
        value={inputValue} 
        placeholder='Location' 
        onChange={e => onChangeValue(e)} />
    </form>
);

};

export default LocationInput;

///////