React Checkbox not being checked or unchecked in popup instantly when it is clicked, instead it is being changed only when the popup is opened again

Here are some screenshots showing the current behavior of the checkbox in popup Current Checkbox behavior

Expected Checkbox behavior in popup: Expected Checkbox behavior

Code:

        let out = "";

        //"choices" is an array, where each row constists 'label_choice' and 'isChecked' fields

        //menus and setMenus is intialized with choices using React useState
        const [menus, setMenus] = React.useState(choices);

        //handleChange function handles the input checkbox change by setting the isChecked field 'true' or 'false' when checked or unchecked
        
        const handleChange = (e) => {
          //setMenus sets the Menus with the updated input change
          setMenus(
            menus.map((o) =>
              o.label_choice === e.target.value ? { ...o, isChecked: !o.isChecked } : { ...o, isChecked: false },
            ),
            out= e.target.value,
          );
        };

body: <div>
           <div style=>
                        {/* menus.map function is used to display all the label_choice along with the input checkbox element */}
                        {menus.map((item) => (
                          <label key={item.label_choice}>
                            {/* checked should be true when the isChecked field is true */}
                            <input type="checkbox" checked={item.isChecked} 
                             value={item.label_choice} onChange={handleChange} />
                            {item.label_choice}
                          </label>
                        ))}
              </div>
         </div>