Issue with controlled input using MUI library

[IngoVals]

I'm trying to make reusable components to use in RHF using MUI. I'm using the FormProvider to pass control element to the components. I'm having a strange issue with the MUI checkbox however.

After first click on the checkbox every change now requires two clicks, this is not true if I click on the label. So the label toggles state correctly but the checkbox only works on every other click.

Here is a Code Sandbox

This is my component

type ControlledCheckedComponentProps = {
  name: string;
} & FormControlLabelProps;

function ControlledCheckedComponent({
  name,
  ...props
}: ControlledCheckedComponentProps) {
  const { control } = useFormContext();
  const {
    field: { value, ...field },
    fieldState: { error },
  } = useController({ name, control });

  return (
    <FormControl error={!!error}>
      <FormControlLabel {...field} {...props} checked={value} />
      <FormHelperText>{error && error.message}</FormHelperText>
    </FormControl>
  );
}

And how I use it

<FormProvider {...methods}>
        <form onChange={methods.handleSubmit((d) => console.log(d))}>
          <ControlledCheckedComponent
            name={"myCheckbox"}
            label={"The checkbox"}
            control={<Checkbox />}
          />
          <button type="submit">Submit</button>
        </form>
      </FormProvider>

EDIT:

On closer inspection it seems to be related to using OnChange instead of OnSubmit