title: How to display defaultValues with useFieldArray hook in controlled components in react-hook-forms
body: <p>I would like to have a field array that can be generated by the user by adding an infinite number of key/value pairs of input text fields. After submitting the form the fields should be saved and when coming back to the form the submitted field array should be displayed and have the same functionality. Meaning the user should be again able to add new key/value pairs of input text field or to delete them.</p>
  <p>The form has separate components and one of them uses React Hook Form's useFieldArray hook. The input components are controlled components.</p>
  <p>I made a simple app on <a href="https://codesandbox.io/s/react-hook-form-usefieldarray-defaultvalues-cb1bi" rel="nofollow noreferrer">codesandbox</a>.</p>
  <p>At first if you click on the add button everything looks fine. Fields get added and submitted.</p>
  <p>But I can't figure out how to display the <code>fieldset</code> prop values passed to the ArrayFields component, see <code>index.js:30</code></p>
  <pre><code>&lt;ArrayFields
    fieldset={[
      { envName: &quot;foo1&quot;, envRole: &quot;bar1&quot; },
      { envName: &quot;foo2&quot;, envRole: &quot;bar2&quot; }
    ]}
  /&gt;
  </code></pre>
  <p>I tried setting defaultValues with the useForm hook, but it didn't work.</p>
  <p>I'm a newbee to react and of course react hook form. If I understand react hook form right then anyway it's better to rely on the useFormContext hook and use the fields from the useFieldArray hook, see <code>ArrayFields.js:6</code>.</p>
  <p>In <code>ArrayFields.js:24-26</code> I tried to copy over the props in order to merge the fields with the fieldset.</p>
  <pre><code>const allFields = [...fields];                  // This does not display the passed prop values, alias fieldset
  // const allFields = [...fieldset];             // This displays the passed prop values but adding field no longer works.
  // const allFields = [...fieldset, ...fields];  // This results in weird add button adding multiple fields at once.
  </code></pre>
  <p>So what could I do here?
  Thanks a lot for your comments.</p>
  <hr />
  <p><a href="https://codesandbox.io/s/react-hook-form-usefieldarray-defaultvalues-cb1bi" rel="nofollow noreferrer">codesandbox</a></p>
  <p>The app is based on</p>
  <ul>
  <li><code>React Hook Form 7</code></li>
  <li><code>React 17</code></li>
  </ul>