Ввод формы не обновляет выборку API

Вот моя составляющая:

const WeatherData = () => {
const [city, setCity] = useState('')
const [unit, setUnit] = useState('imperial');
const [cardData, setCardData] = useState({});
function getForecast() {
    fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&units=${unit}&appid={hidden}`)
    .then(response => response.json())
    .then(response => setCardData(response))}

    return (
        <div>
        <form onSubmit={getForecast}>
            <input 
                placeholder='Enter City'
                value={city}
                onChange={(e) => setCity(e.target.value)}
            />
            <button type='submit'>Get Forecast</button>
        </form>
        </div>}

Моя проблема в том, что когда я ввожу город в свой ввод, а затем нажимаю кнопку отправки, он не обновляет состояние {city} для функции getForecast. Что не так?