title: Material UI + React Form Hook + multiple checkboxes + default selected
body: <p>I am trying to build a form that accommodates multiple 'grouped' checkboxes using <code>react-form-hook</code> <code>Material UI</code>.</p>
  
  <p>The checkboxes are created async from an HTTP Request.</p>
  
  <p>I want to provide an array of the objects IDs as the default values:</p>
  
  <p><code>defaultValues: { boat_ids: trip?.boats.map(boat =&gt; boat.id.toString()) || [] }</code></p>
  
  <p>Also, when I select or deselect a checkbox, I want to add/remove the <strong>ID of the object</strong> to the values of <code>react-hook-form</code>.</p>
  
  <p>ie. (<code>boat_ids: [25, 29, 4]</code>)</p>
  
  <p>How can I achieve that?</p>
  
  <p>Here is a <a href="https://codesandbox.io/s/smoosh-dream-zmszs" rel="noreferrer">sample</a> that I am trying to reproduce the issue.</p>
  
  <p>Bonus point, validation of minimum selected checkboxes using Yup</p>
  
  <p><code>boat_ids: Yup.array() .min(2, "")</code></p>