Реагировать обновить значение после рендеринга

Всем привет,

У меня есть этот компонент React, и я хочу обновить состояние города при изменении ввода текста. проблема здесь в том, что реагируют на обновление этого значения после завершения выполнения функции или после рендеринга. Поэтому, когда я ввожу первое значение, отображается пустая строка, а во втором значении отображается предыдущее значение.

например:

ввод=> n , (выход)город=>""
ввод=> ne , (выход) город=>"n"

function Weather() {
    const [city, setCity] = useState('');
    const [temp, setTemp] = useState(0);
    const [display, setDisplay] = useState(false);
    const classes = useStyles();
    var preTimeout = null;

    const fetchWether = () => {
        const host = 'http://127.0.0.1';
        const port = '4000';
        axios
            .get(`${host}:${port}/weather`, {
                params: {
                    city: city,
                },
            })
            .then((res) => {
                console.info(res.data);
                setDisplay(true);
            })
            .catch((err) => {
                console.info(err);
            });
        return false;
    };

    const handleChangeEvent = (e) => {
        setCity(e.target.value);
        console.info(city);
        chooseWord();
    };

    const chooseWord = () => {
        console.info(city);
        // if (preTimeout) clearTimeout(preTimeout);
        // if (city !== '') {
        //     console.info('Serarching the data');
        //     preTimeout = setTimeout(() => fetchWether(), 3000);
        // }
        // console.info({ city });
    };

    return (
        <div>
            <div className = {classes.margin}>
                <Grid container spacing = {1} alignItems = "flex-end">
                    <Grid item>
                        <ApartmentIcon
                            style = {{ color: green[500] }}
                            className = {classes.icon}
                        />
                    </Grid>
                    <Grid item>
                        <TextField
                            id = "input-with-icon-grid"
                            label = "City"
                            onChange = {(e) => {
                                handleChangeEvent(e);
                            }}
                        />
                    </Grid>
                </Grid>
            </div>
        </div>
    );
}

export default Weather;