Hidden input element becomes out of sync if checked is maintained as a state Completed

Hi,

I'm using React Hook Form to manage form state and I had some odd behaviour with the CheckBoxComponent where the checked prop is managed state. I've created a stripped down example that just uses "useState" instead of React Hook Form which exhibits the same behaviour.

So basically if the value of the "checked" prop for the CheckBoxComponent is maintained as state and the change callback prop is passed in to update that state then clicking interactively on the control results in the visual check on the control correctly changing on the first click but the hidden input doesn't, and then on subsequent clicks the two toggle but are always displaying the opposite. Updating the state from an external event (i.e. a button) doesn't exhibit the same behaviour, it's just when clicking on the control to change its state where the issue arises.

See my example here where I've used CSS to force the hidden input to be shown to the right.

So perform the following steps:

1. Click on the checkbox to the left of "Default" (which is the control)
2. Observe that it becomes checked but the actual input element (normally hidden) that is managed by the control to the right remains unchecked
   
3. Click on the checkbox to the left of "Default" again
4. Observe that it becomes unchecked and the actual input element to the right toggles to checked (i.e. it is out of sync)
5. Click on the "Check" button and observe that both become checked
6. Click on the "Uncheck" button and observe that both become unchecked