title: React Hook Forms + Material UI Checkboxes
body: <p>I am having an error when submiting a form build using React Hook Form and material-ui checkboxes components. The number of checkboxes are build from a list from my api:</p>
  
  <pre><code>        &lt;Grid item xs={12}&gt;
            &lt;FormControl
              required
              error={errors.project?.stack ? true : false}
              component='fieldset'&gt;
              &lt;FormLabel component='legend'&gt;Tech Stack&lt;/FormLabel&gt;
              &lt;FormGroup&gt;
                &lt;Grid container spacing={1}&gt;
                  {techs.map((option, i) =&gt; (
                    &lt;Grid item xs={4} key={i}&gt;
                      &lt;FormControlLabel
                        control={
                          &lt;Checkbox
                            id={`stack${i}`}
                            name='project.stack'
                            value={option.id}
                            inputRef={register({required: 'Select project Tech Stack'})}
                          /&gt;
                        }
                        label={option.name}
                      /&gt;
                    &lt;/Grid&gt;
                  ))}
                &lt;/Grid&gt;
              &lt;/FormGroup&gt;
              &lt;FormHelperText&gt;{errors.project?.stack}&lt;/FormHelperText&gt;
            &lt;/FormControl&gt;
          &lt;/Grid&gt;
  </code></pre>
  
  <p>When the form is submited I got the following error ( several times , 1 for each checkbox rendered ) :</p>
  
  <blockquote>
    <p>Uncaught (in promise) Error: Objects are not valid as a React child
    (found: object with keys {type, message, ref}). If you meant to render
    a collection of children, use an array instead.</p>
  </blockquote>
  
  <p>I don't understand this error. The message apparently says it is a rendering issue, but the component renders fine. The problems happens on submit. Any advices ?</p>
  
  <p>Thank you</p>