Why is the checkbox state updated this way?

Question

React

There is this code:

const rejectedCodes = {unverifiable: {status: false, code: 3}, ...}
const [rejectedStatuses, setRejectedStatuses] = useState(rejectedCodes);

<Checkbox
   checked={rejectedStatuses.unverifiable.status}
   onChange={(e) => {
        setRejectedStatuses({
             ...rejectedStatuses,
             unverifiable: { ...rejectedStatuses.unverifiable, status: e.target.checked }
       })
       console.log(rejectedStatuses);
   }}
>
Unverifiable
</Checkbox>

When you click on this checkbox, the state changes as it should, but the state of the checkbox itself is opposite to it - i.e. when status: true, the checked checkbox property is false and vice versa.
An attempt to cheat by inverting the state, of course, makes the checkbox unclickable.

Answer 1

Because rejectedStatuses contains the state at the time of the last render. It cannot be changed by calling setRejectedStatuses, at least because it is a constant. And you check its value immediately after calling the setter function, as if the constant had changed once. It will change the next time the component's function is called, that is, after rendering caused by a state change.