title: RHF not resetting values in an MUI checkbox group
body: <p>I am trying to reset my form with the <code>reset()</code> method and, it is working partially. All of the form's fields get reset, except for the checkboxes group.</p>
  <p>I have tried three different ways of implementing an MUI <code>CheckboxesGroup</code> but, I always get the same result.</p>
  <p>You can see a working example in this <a href="https://codesandbox.io/s/reset-checkbox-group-9tu0d" rel="nofollow noreferrer">sandbox</a></p>
  <p><strong>Checkbox one implementation</strong></p>
  <pre><code>&lt;FormControl error={error} required={required} component=&quot;fieldset&quot;&gt;
        &lt;FormLabel component=&quot;legend&quot;&gt;{label}&lt;/FormLabel&gt;
        &lt;Controller
          name={name}
          render={({ field: { onBlur: rhfonBlur, onChange: rhfonChange } }) =&gt; (
            &lt;FormGroup onBlur={rhfonBlur}&gt;
              {Object.keys(options).map((key) =&gt; {
                return (
                  &lt;FormControlLabel
                    label={key}
                    key={key}
                    control={
                      &lt;Checkbox onChange={(e) =&gt; rhfonChange(handleCheck(key))} /&gt;
                    }
                  /&gt;
                );
              })}
            &lt;/FormGroup&gt;
          )}
          control={control}
        /&gt;
        &lt;FormHelperText&gt;{helperText}&lt;/FormHelperText&gt;
      &lt;/FormControl&gt;
  </code></pre>
  <p><strong>Checkbox two implementation</strong></p>
  <pre><code>&lt;FormControl error={error}&gt;
        &lt;FormLabel component=&quot;legend&quot;&gt;{label}&lt;/FormLabel&gt;
        &lt;FormGroup&gt;
          {Object.keys(options).map((key) =&gt; {
            return (
              &lt;FormControlLabel
                key={key}
                control={&lt;Checkbox {...register(name)} /&gt;}
                value={key}
                label={key}
              /&gt;
            );
          })}
        &lt;/FormGroup&gt;
        &lt;FormHelperText&gt;{helperText}&lt;/FormHelperText&gt;
      &lt;/FormControl&gt;
  </code></pre>
  <p><strong>Checkbox three implementation</strong></p>
  <pre><code>&lt;FormControl required error={error} component=&quot;fieldset&quot; variant=&quot;standard&quot;&gt;
        &lt;FormLabel component=&quot;legend&quot;&gt;{label}&lt;/FormLabel&gt;
        &lt;Controller
          control={control}
          name={name}
          render={({ field: { onChange: rfhonChange, value } }) =&gt; {
            // console.log(&quot;value:&quot;, value);
            return (
              &lt;FormGroup&gt;
                {Object.keys(state).map((key) =&gt; {
                  return (
                    &lt;FormControlLabel
                      label={key}
                      key={key}
                      control={
                        &lt;Checkbox
                          onChange={(e) =&gt; {
                            rfhonChange(handleChange(e));
                          }}
                          checked={state[key]}
                          name={key}
                        /&gt;
                      }
                    /&gt;
                  );
                })}
              &lt;/FormGroup&gt;
            );
          }}
        /&gt;
        &lt;FormHelperText&gt;{helperText}&lt;/FormHelperText&gt;
      &lt;/FormControl&gt;
  </code></pre>