Как сделать запрос API автоматически в React?

Я пытаюсь создать настраиваемую домашнюю страницу для своего браузера. Я реализовал API для отображения погоды, но работает только при нажатии клавиши ввода. Я хочу отображать данные автоматически при загрузке страницы, не нажимая клавишу ввода, автоматически показывая погоду в Бристоле, и когда я ввожу другое местоположение, API сможет запрашивать и отображать. Я пробовал много способов, таких как (удаление крючка, изменение начального состояния крючка, но ничего не работает). Это мой код:

    const [query, setQuery] = useState('Bristol');
    const [weather, setWeather] = useState({});

const search = async () => {
    fetch(`${api.base}weather?q=${query}&units=metric&APPID=${api.key}`)
    .then(res => res.json())
    .then(result => {
        setWeather(result);
        setQuery('')
        console.info(result)
    });
}

    return(
        <div className = "app">
            <main>
                <div className = "search-box">
                    <input
                        type = "text"
                        className = "search-bar"
                        placeholder = "Search..."
                        onChange = {e => setQuery(e.target.value)}
                        value = {query}
                        onKeyPress = {search}
                    />
                </div>
                {(typeof weather.main != "undefined") ? (
                    <div>
                    <div className = "location-box">
                        <div className = "location">{weather.name}</div>
                        <div className = "date">{dateBuilder(new Date())}</div>
                    </div>
                        <div className = "weather-box">
                            <div className = "temp">
                                {Math.round(weather.main.temp)}
                            </div>
                            <div className = "weather">
                                {weather.weather[0].main}
                            </div>
                        </div>
                    </div>
                ) : ('')}
            </main>
        </div>
    )
} 

Я новичок в ReactJS, и это немного сбивает с толку, потому что здесь я использую один и тот же файл для кода и для рендеринга, я делал это раньше, но я использовал простой JavaScript с экспрессом и т. д. и я визуализировал в HTML.