React State Shows False When True Is Expected

Very simple goal. When a checkbox is clicked set the state of itemOne to true initially. Then it should toggle state if clicked again. When itemOneSelected is invoked itemOne is shown as false.

The question: Why is itemOne set to false instead of true when itemOneSelected is invoked?

      const [itemOne, setItemOne] = useState(false);
      const itemOneSelected = () => {
      setItemOne(!itemOne)
      console.log(itemOne)
      }

    
      <FormControlLabel control={<Checkbox onClick => { itemOneSelected() } } />} 

>Solution :

Remember useState is asynchronous so it will not update straight away. To get the console.log value to log your value you should add a useEffect.

    useEffect(() => {
        console.log(itemOne) 
    },[itemOne])