State is one change behind in select menu - reactjs

Question

I have a dropdown menu that is used to select a State. It is used to display different data per state. I am console.log(), Whenever I go to select a state and the initial one is '' and when I change again, it seems to be one step behind. For example: My dropdown menu starts empty, I then select New York. It prints '', I then select Maine, It prints New York. I think I understand why it is happening but I cannot figure out how to fix it.
ProjectStatus.js
const [selectedState, setSelectedState] = useState('');
const handleChange = event => {
setSelectedState(event.target.value);
console.log(selectedState);
};
return (
<div className='project-status-nav'>
<h3>Project Status Page</h3>
<hr className='separator' />
<FormControl variant='filled' className={classes.formControl}>
<InputLabel htmlFor='selectState'>Select State</InputLabel>
<Select
id='selectState'
className='selectStyle'
value={selectedState}
onChange={handleChange}>
<MenuItem value={''}> </MenuItem>
<MenuItem value={'New York'}>New York</MenuItem>
<MenuItem value={'New Jersey'}>New Jersey</MenuItem>
<MenuItem value={'Colorado'}>Colorado</MenuItem>
<MenuItem value={'Florida'}>Florida</MenuItem>
<MenuItem value={'Maine'}>Maine</MenuItem>
</Select>
</FormControl>
</div>
);

Answer 1

That happens because state isn't immediatly updated. When the function is called, selectedState is declared and doesn't change untill the next call (update).
You can if you want observe selectedState changes with useEffect, or create an custom hook to do it like this:
// works like the React class setState, but the callback is called passing the new State
function useStateCallback(initialState) {
const [[state, cb], setState] = useState([initialState, null]);
useEffect(
() => {
cb && cb(state);
},
[state]
);
const setStateCallback = (value, callback) => setState([value, callback]);
return [state, setStateCallback];
}
function App() {
const [val, setVal] = useStateCallback(0);
const increment = () =>
setVal(val + 1, newVal => alert("Incremented: " + newVal));
}

Answer 2

setSelectedState is not synchronous, so when you log the value of selectedState just after calling setSelectedState, you get the current value, not the new one. That's why you're always one step behind

Answer 3

I faced the same problem and solved it like this.
const [breakwater, setBreakwater] = useState(props.breakwater);
useEffect( () => {
props.handleBreakwater(breakwater); //I updated the parent component's state in useEffect
},[breakwater]);
const handleprimaryBwType = (e) =>{
setBreakwater({...breakwater, primaryBwType : e.target.value});
//props.handleBreakwater(breakwater); when i updated here a selection was updating from behind
}