Как исправить работу setState?

Question

saqo_tadevosyan @saqo_tadevosyan

React

Как исправить работу setState?

Добрый день, создал компонент с помощью функции и исползвал хук useState,при выборе города из списка должен отображаться погода в этом городе,но при выборе работает handleChange который в аргументе получает имя города,и если сделать console.log(city) всё будет нормально,но это имя не сохраняется сразу в value придётся ещё раз нажат на имя в списке (всё это выглядит будто мы отменяем выбор) и только после этого в state сохраняется имя, если использовать класс компонент этого можно избежать с помощью колбека как второй аргумент в setState,но мне нужно писать именно хуками,как это можно исправить?(сори за ошибки)

import React, { FC, useContext, useEffect, useState } from 'react';
import './weatherOfWeek.scss';
import WeatherContext from '../../context/get-weather-data/weatherContext';
import windIcon from '../../assets/images/winds.png';
import termIcon from '../../assets/images/temp.png';
import WeatherSearch from '../weather-search/WeatherSearch';
import { week } from '../../api/urls';
import { WeatherContextType } from '../../context/get-weather-data/model/WeatherType';
import CitySelector from "../city-selector/CitySelector"
const WeatherOfWeek: FC = () => {
  const weatherContext = useContext(WeatherContext) as WeatherContextType;
  const { getWeatherData } = weatherContext;
  const data = weatherContext?.data.data;
  const [value, setValue] = useState();

  const handleChange:any =  (citys:any) => {

     setValue(citys)
    console.log(citys.toString(),value);

handleSubmit()
  };

  const handleSubmit = () => {
    
      weatherContext?.getWeatherData(value, week);

    
  }
  useEffect(() => {
    getWeatherData();
  }, [getWeatherData]);
  return (
    <>
      <CitySelector onChange={handleChange}/>
      <div className='week__container'>
        {data?.list.map((item) => (
          <div className='week__container--items' key={item.dt}>
            <div className='week__container--name'>
              <p>{data.city.name}</p>
            </div>
            <div className='week__container--temp'>
              <img
                src={`http://openweathermap.org/img/w/${item.weather[0].icon}.png`}
                alt='Weather Icon'
              />
              <p>{Math.ceil(item.main.temp)} &deg;&nbsp;C</p>
            </div>
            <div className='week__container--type'>
              <p>{item.weather[0].main}</p>
            </div>
            <div className='week__container--options'>
              <div>
                <img src={windIcon} alt='Wind Icon' />
                <p>Wind speed &nbsp;{item.wind.speed}&nbsp; m/s</p>
              </div>
              <div>
                <img src={termIcon} alt='Wind Icon' />
                <p>Wind degree &nbsp;{item.wind.deg} &nbsp; deg</p>
              </div>
            </div>
          </div>
        ))}
      </div>
    </>
  );
};

export default WeatherOfWeek;