issue: MUI Checkbox is not showing the checkbox checked if initially set to true using setValue

[anandchakru]

Version Number

7.51.1

Codesandbox/Expo snack

https://stackblitz.com/edit/vitejs-vite-r3mrgb?file=src%2FApp.tsx

Steps to reproduce

1. Go to 'Preview' in the stackblitz linke provided above
2. Click on 'Submit'
3. Observe Live1 checkbox is unchecked
4. See the response is Result:{"live1":true,"live3":true,"live2":"_1711090817282"}

Expected behaviour

Live1 checkbox should show as checked in the UI

What browsers are you seeing the problem on?

Firefox, Chrome, Safari, Edge

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[sujinleeme]

it seems like you're setting the default values for your form fields using setValue. Instead of this useEffect, you can set defaultValue inside useForm:

 const { register, handleSubmit, control } = useForm<FormType>({
    defaultValues: {
      live1: true,
      live2: `_${new Date().getTime()}`,
      live3: true,
    },
  });

Also, you can make more controlled component:

  <Controller
    control={control}
    name='live1'
    render={({ field: { onChange, value } }) => (
      <FormControlLabel
        control={<Checkbox checked={value} onChange={onChange} />}
        label='Label 1'
      />
    )}
  />;

stackblitz

[pmka99]

if you use another Checkbox Component like ( , Ant Design) just under warning is happen. But its working well.

**
requests.js:1 Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components Error Component Stack
**

But material-ui is sensetive for checkbox inititalValue. and if initalValue is undefined under error is happen , And does'nt work in first rendering.

**MUI: A component is changing the uncontrolled checked state of SwitchBase to be controlled.
Elements should not switch from uncontrolled to controlled (or vice versa).
Decide between using a controlled or uncontrolled SwitchBase element for the lifetime of the component.
The nature of the state is determined during the first render. It's considered controlled if the value is not undefined.
**