title: Maintain state of useFieldArray react-hook-form
body: <p>I built a multistep form using <em><strong>react-hook-form</strong></em> with a dynamic fields array using useFieldArray.</p>
  <p>Documentation: <a href="https://react-hook-form.com/api/usefieldarray/" rel="nofollow noreferrer">useFieldArray documentation</a></p>
  <p>Here is the full working code link: <a href="https://codesandbox.io/s/happy-newton-wu9ck" rel="nofollow noreferrer">React Multi-step form with useFieldArray </a></p>
  <p>In the 2nd step when I add new fields using <strong>add a dog</strong> button, everything works fine, the new data of step is saved to localstorage using <em><strong>little state machine</strong></em>.</p>
  <p><a href="https://i.stack.imgur.com/LxenM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LxenM.png" alt="enter image description here" /></a></p>
  <p>But when I click the previous button, the added fields disappear whereas data is still in localstorage.</p>
  <p>code for 2nd step:</p>
  <pre><code>import { useForm, useFieldArray } from &quot;react-hook-form&quot;;
  import { useStateMachine } from &quot;little-state-machine&quot;;
  import updateAction from &quot;./updateAction&quot;;
  import { useNavigate } from &quot;react-router-dom&quot;;
  
  function Step2(props) {
  const {
      register,
      control,
      handleSubmit,
      watch,
      formState: { errors },
  } = useForm({
      defaultValues: {
          test: [{ nameOfDog: &quot;Bill&quot;, ageOfDog: &quot;2&quot;, sizeOfDog: &quot;small&quot; }],
      },
  });
  
  const { fields, append, remove } = useFieldArray({
      control,
      shouldUnregister: true,
      name: &quot;test&quot;,
  });
  
  const elements = watch(&quot;test&quot;);
  console.log(elements, fields);
  
  const { actions, state } = useStateMachine({ updateAction });
  const navigate = useNavigate();
  const onSubmit = (data) =&gt; {
      // console.log(fields);
      actions.updateAction(data);
      navigate(&quot;/step3&quot;);
  };
  
  let dta;
  if (state.date2) {
      dta = new Date(state.date2);
  } else {
      dta = new Date();
      dta.setDate(dta.getDate() + 1);
  }
  
  return (
      &lt;form className=&quot;form&quot; onSubmit={handleSubmit(onSubmit)}&gt;
          &lt;div className=&quot;stepn stepn-active&quot; data-step=&quot;1&quot;&gt;
              {fields.map((item, index) =&gt; {
                  return (
                      &lt;div className=&quot;row&quot; key={item.id}&gt;
                          &lt;div className=&quot;col&quot;&gt;
                              &lt;label htmlFor=&quot;nameOfDog&quot;&gt;Name:&lt;/label&gt;
                              &lt;input
                                  id=&quot;nameOfDog&quot;
                                  {...register(`test.${index}.nameOfDog`, {
                                      required: true,
                                  })}
                                  defaultValue={item.nameOfDog}
                              /&gt;
                              {errors.nameOfDog &amp;&amp; (
                                  &lt;span&gt;This field is required&lt;/span&gt;
                              )}
                          &lt;/div&gt;
                          &lt;div className=&quot;col&quot;&gt;
                              &lt;label htmlFor=&quot;ageOfDog&quot;&gt;Age:&lt;/label&gt;
                              &lt;input
                                  id=&quot;ageOfDog&quot;
                                  type=&quot;number&quot;
                                  {...register(`test.${index}.ageOfDog`, {
                                      required: true,
                                  })}
                                  defaultValue={item.ageOfDog}
                              /&gt;
                              {errors.ageOfDog &amp;&amp; (
                                  &lt;span&gt;This field is required&lt;/span&gt;
                              )}
                          &lt;/div&gt;
                          &lt;div className=&quot;col&quot;&gt;
                              &lt;label htmlFor=&quot;sizeOfDog&quot;&gt;Size in Lbs:&lt;/label&gt;
                              &lt;select
                                  id=&quot;sizeOfDog&quot;
                                  {...register(`test.${index}.sizeOfDog`, {
                                      required: true,
                                  })}
                                  defaultValue={item.sizeOfDog || &quot;&quot;}
                              &gt;
                                  &lt;option value=&quot;small&quot;&gt;Small (40)&lt;/option&gt;
                                  &lt;option value=&quot;large&quot;&gt;Large (40+)&lt;/option&gt;
                              &lt;/select&gt;
                              {errors.sizeOfDog &amp;&amp; (
                                  &lt;span&gt;Please Select an option&lt;/span&gt;
                              )}
                          &lt;/div&gt;
                          &lt;div className=&quot;col&quot;&gt;
                              &lt;button
                                  onClick={(e) =&gt; {
                                      e.preventDefault();
                                      remove(index);
                                  }}
                                  style={{ padding: &quot;26px 62px&quot; }}
                              &gt;
                                  Delete
                              &lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  );
              })}
              &lt;div className=&quot;row&quot;&gt;
                  &lt;div className=&quot;col&quot;&gt;
                      &lt;button
                          onClick={(e) =&gt; {
                              e.preventDefault();
                              append({
                                  nameOfDog: &quot;Bill2&quot;,
                                  ageOfDog: &quot;5&quot;,
                                  sizeOfDog: &quot;large&quot;,
                              });
                          }}
                      &gt;
                          Add a Dog
                      &lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          {/* &lt;input type=&quot;submit&quot; /&gt; */}
          &lt;div className=&quot;row&quot;&gt;
              &lt;button className=&quot;prev&quot; onClick={() =&gt; navigate(&quot;/&quot;)}&gt;
                  Previous
              &lt;/button&gt;
              &lt;button className=&quot;next&quot;&gt;Next&lt;/button&gt;
          &lt;/div&gt;
      &lt;/form&gt;
      );
     }
  
   export default Step2;
  </code></pre>
  <p><em><code>{fields.map((item, index) =&gt;</code></em></p>
  <p>whenever the previous button is clicked, <strong>fields</strong> array resets to default.</p>
  <p><a href="https://i.stack.imgur.com/bgTyt.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bgTyt.gif" alt="enter image description here" /></a></p>
  <p>All the remaining steps of the form except 2nd step is being saved when we go back to previous step.</p>
  <p>How do i keep the fields in the 2nd step saved when I click the previous button.</p>