Объект не будет добавляться в массив полей с формой реакции-крючка

Question

Я пытаюсь настроить форму с помощью response-hook-form (что, кстати, потрясающе) для ввода телесериала, в котором сериал имеет произвольное количество сезонов, и каждый сезон имеет произвольное количество эпизодов. Я знаю, что мне нужно иметь сезоны в виде массива полей, но, поскольку не представляется возможным создать новый массив полей для каждого сезона, я создал отдельный массив полей эпизодов, который будет содержать массив объектов, включая «сезон» "ключ, чтобы я мог определить и отфильтровать, какие серии к какому сезону относятся. Возможно, есть лучший способ настроить это в целом, и это может быть настоящей проблемой здесь.

Однако с тем, что я настроил, я сталкиваюсь с проблемой, когда мне нужно сохранить значения в реакции -hook-form крючок, который не будет отображаться на странице как часть формы, например, индекс эпизода (чтобы я мог обновить его в массиве полей без сопоставления всех эпизодов) и номер сезона, которому он принадлежит. Однако, когда я пытаюсь добавить эпизод в массив полей эпизодов, он не обновляется должным образом, и эпизоды не определены после добавления первого эпизода или сохраняют только значение зарегистрированных полей после любых последующих добавлений. Мне определенно кажется, что это как-то связано с полями в эпизодах, которые не регистрируются как часть формы, но в моем случае не все поля могут быть частью формы. Интересно, есть ли у кого-нибудь представление о том, как работать с этой проблемой или решить ее, возможно, с использованием фактического состояния реакции при минимальном рендеринге.

Кодовая песочница здесь

https://codesandbox.io/s/determined-browser-7ppf1

Ожидаемое поведение, описанное выше: после добавления сезона добавьте несколько эпизодов и посмотрите, как «номер эпизода» постепенно увеличивается в пользовательском интерфейсе, и после отправки просмотрите всю информацию о эпизоде ​​в консоли.

РЕДАКТИРОВАТЬ: я переношу код из React, где состояние было похоже на

seriesState = {
  seriesTitle: "New TV Series"
  seasons: [
    {
      seasonTitle: "Season 1",
      seasonNumber: 1,
      episodes: [
        {
        episodeNumber: 1,
        title: "Season 1 Episode 1"
        },
        {
        episodeNumber: 2
        title: "Season 1 Episode 2"
        }
      ]
    },
    {
      seasonTitle: "Season 2",
      seasonNumber: 2,
      episodes: [
        {
        episodeNumber: 1,
        title: "Season 2 Episode 1"
        },
        {
        episodeNumber: 2,
        title: "Season 2 Episode 2"
        }
      ]
    }
  ]
}

, и пытаюсь переписать его для формы реакции-крючка, переписав его, как показано ниже

seriesState = {
  seriesTitle: "New TV Series"
  seasons: [
    {
      number: 1,
      seasonTitle: "Season 1"
    },
    {
      number: 2,
      seasonTitle: "Season 2"
    }
  ],
  episodes: [
    {
      seasonNumber: 1,
      episodeNumber: 1
      episodeTitle: "season 1 episode 1"
    },
    {
      seasonNumber: 1,
      episodeNumber: 2
      episodeTitle: "season 1 episode 2"
    },
    {
      seasonNumber: 2,
      episodeNumber: 1
      episodeTitle: "season 2 episode 1"
    },
        {
      seasonNumber: 2,
      episodeNumber: 2
      episodeTitle: "season 2 episode 2"
    }
  ]
}

а теперь меняю на