title: react-hook-form id not saved with useFieldArray
body: <p>Could someone figure out what's wrong with my code? I'm using react-hook-form's useFieldArray and want to generate a unique id for each field. I'm trying to do that with append but somehow the id field disappears. Even if I changed <code>keyname: 'newId'</code>, this isn't logged into the data.</p>
  <p>I am also using Material UI.</p>
  <p>My code:</p>
  <pre><code>...
      const { register, control, handleSubmit, errors } = useForm({
          defaultValues: {
            arrayName: {id: uuidv4(), name: &quot;name goes here&quot;}
          }
        });
  
      const { fields, remove, append } = useFieldArray(
          {
            control,
            name: &quot;arrayName&quot;,
            // keyName: 'formId' // deafult and you can rename to others
          }
      );
  ...
                  &lt;TextField 
                      label=&quot;Test Type&quot;
                      variant=&quot;outlined&quot;
                      type=&quot;text&quot;
                      name={`arrayName[${index}].name`}
                      defaultValue={`${field.name}`}
                      inputRef={register()}
                  /&gt;
          &lt;Button
              variant=&quot;contained&quot;
              color=&quot;primary&quot;
              size=&quot;large&quot;
              className={classes.button}
              startIcon={&lt;AddCircleIcon /&gt;}
              onClick={() =&gt; append({ id: uuidv4(), type: &quot;&quot;, score: 0 })}
          &gt;
              Add Array Item
          &lt;/Button&gt; 
  </code></pre>
  <p>I have a submit button later that call this:</p>
  <pre><code>    const onSubmit = data =&gt; {
          handleArrayChange(originalArray.id, { ...originalArray, ...data })
          history.push(`/newURL`)
      }
  </code></pre>
  <p>Thank you in advance!</p>