How to fix setState work?

Question

React

Good afternoon, I created a component using a function and used the useState hook, when a city is selected from the list, the weather in this city should be displayed, but when selected, handleChange works which receives the name of the city in the argument, and if you do console.log(city) everything will be fine, but this name is not immediately stored in value, you will have to click on the name in the list again (it all looks like we are deselecting) and only after that the name is stored in state, if you use the component class, this can be avoided using a callback as the second argument in setState, but I need to write with hooks, how can I fix this? (sorry for the mistakes)

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;

Answer 1

There is no way to fix it, everything is working correctly. Want to feel the changed value - for this there is useEffect.