title: Object won't append to field array with react-hook-form
body: <p>I'm trying to set up a form with react-hook-form (which is amazing by the way) to input a TV series where the series has an arbitrary number of seasons and each season has an arbitrary number of episodes. I know I need to have seasons as a field array, but since it doesn't seem possible to create a new field array for each season, I've created a separate episodes field array which will hold an array of objects including a &quot;season&quot; key so I can identify and filter which episodes belong to which season. It's possible theres a better way to set this up altogether and that might be the real problem here.</p>
  <p>With what I have set up though, I'm running into an issue where I need to keep values in the react-hook-form hook that won't be shown on the page as part of the form like the index of the episode (so I can update it in the field array without mapping through all episodes) and the season number it belongs to. When I try to append an episode to the episodes field array though, it doesn't update properly and episodes is undefined after the first episode is appended or only keeps the value of registered fields after any subsequent appends. Definitely seems to me that this has something to do with fields in episodes not being registered as part of the form, but in my case not all fields can be part of the form. Wondering if anyone has an idea for how to work with this problem or get around out, maybe with using actual react state while keeping renders at a minimum.</p>
  <p>Code sandbox here</p>
  <p><a href="https://codesandbox.io/s/determined-browser-7ppf1" rel="nofollow noreferrer">https://codesandbox.io/s/determined-browser-7ppf1</a></p>
  <p>Expected behavior of above: after adding a season, add multiple episodes and see &quot;episode number&quot; move up incrementally in the UI and see all episode information in the console after submit.</p>
  <p>EDIT:
  I'm porting over code from React where the state was like</p>
  <pre><code>seriesState = {
    seriesTitle: &quot;New TV Series&quot;
    seasons: [
      {
        seasonTitle: &quot;Season 1&quot;,
        seasonNumber: 1,
        episodes: [
          {
          episodeNumber: 1,
          title: &quot;Season 1 Episode 1&quot;
          },
          {
          episodeNumber: 2
          title: &quot;Season 1 Episode 2&quot;
          }
        ]
      },
      {
        seasonTitle: &quot;Season 2&quot;,
        seasonNumber: 2,
        episodes: [
          {
          episodeNumber: 1,
          title: &quot;Season 2 Episode 1&quot;
          },
          {
          episodeNumber: 2,
          title: &quot;Season 2 Episode 2&quot;
          }
        ]
      }
    ]
  }
  </code></pre>
  <p>and trying to rewrite it for react-hook-form by rewriting it like below</p>
  <pre><code>seriesState = {
    seriesTitle: &quot;New TV Series&quot;
    seasons: [
      {
        number: 1,
        seasonTitle: &quot;Season 1&quot;
      },
      {
        number: 2,
        seasonTitle: &quot;Season 2&quot;
      }
    ],
    episodes: [
      {
        seasonNumber: 1,
        episodeNumber: 1
        episodeTitle: &quot;season 1 episode 1&quot;
      },
      {
        seasonNumber: 1,
        episodeNumber: 2
        episodeTitle: &quot;season 1 episode 2&quot;
      },
      {
        seasonNumber: 2,
        episodeNumber: 1
        episodeTitle: &quot;season 2 episode 1&quot;
      },
          {
        seasonNumber: 2,
        episodeNumber: 2
        episodeTitle: &quot;season 2 episode 2&quot;
      }
    ]
  }
  </code></pre>
  <p>and now I'm changing it to</p>