title: How do I store the state of radio groups in React using react-hook-form
body: <p>I'm using <a href="https://react-hook-form.com/" rel="noreferrer">react-hook-form</a> to store form data that is split into two pages as per the code seen on <a href="https://codesandbox.io/s/react-hook-form-wizard-form-with-radio-buttons-whvf7" rel="noreferrer">Codesandbox.io</a>. I am able to successfully store simple text inputs (like first name, email, etc) using property assignments like <code>defaultValue={state.data.firstName}</code> for example...but I can't figure out how to store the checked item in the radio group using the model suggested by react-hook-form. I've checked <a href="https://react-hook-form.com/api" rel="noreferrer">their documentation</a>, and it's unfortunately sparse in mentioning radio button group state storage. Is this possible using their API?</p>
  
  <pre><code>import React from "react";
  import { useForm } from "react-hook-form";
  import { withRouter } from "react-router-dom";
  import { useStateMachine } from "little-state-machine";
  import updateAction from "./updateAction";
  
  const Step1 = props =&gt; {
    const { register, handleSubmit, errors } = useForm();
    const { action, state } = useStateMachine(updateAction);
    const onSubit = data =&gt; {
      action(data);
      props.history.push("./step2");
    };
  
    return (
      &lt;form onSubmit={handleSubmit(onSubit)}&gt;
        &lt;h2&gt;Step 1&lt;/h2&gt;
        &lt;label&gt;
          First Name:
          &lt;input
            name="firstName"
            ref={register}
            defaultValue={state.data.firstName}
          /&gt;
        &lt;/label&gt;
        &lt;label&gt;
          Last Name:
          &lt;input
            name="lastName"
            ref={register}
            defaultValue={state.data.lastName}
          /&gt;
        &lt;/label&gt;
  
        &lt;label className="control-label" htmlFor="vehicles"&gt;How many vehicles do you own?&lt;br /&gt;
          &lt;input type="radio" name="vehicles" id="vehicles-1" value="1"
            ref={register({ required: true })} className="radio" /&gt;
          &lt;label class="radio"&gt;1&lt;/label&gt;
  
          &lt;input type="radio" name="vehicles" id="vehicles-2" value="2"
            ref={register({ required: true })} className="radio" /&gt;
          &lt;label class="radio"&gt;2&lt;/label&gt;
          {errors.vehicles &amp;&amp; &lt;div className="form_error"&gt;Number of Vehicles is required&lt;/div&gt;}
        &lt;/label&gt;
  
        &lt;input type="submit" /&gt;
      &lt;/form&gt;
    );
  };
  
  export default withRouter(Step1);
  </code></pre>
  
  <p>Thanks, in advance, for your help!</p>