Nesting conditional doen't work

Describe the bug Conditional work only one level but you nest conditional i.e. add conditional that dependends on conditional just 2 leves then it gets messed up.

To Reproduce

1. Click on Add Todo button
2. Select either Type One or Type Two
3. Now Select either Sub Type.

Issue here is

1. None of the subtype radio is getting selected.
2. Subtype select first time works but if you switch them then it doesn’t work.

import { ArrayField, useFieldArray, useForm } from "react-hook-form"

interface Props {}

interface ConProps {
  index: number
  field: Partial<ArrayField<Record<string, any>, "id">>
}

function TestTwo(props: Props): JSX.Element {
  const { register, handleSubmit, control, watch } = useForm()

  const { fields, append, remove } = useFieldArray({
    control,
    name: "todos",
  })

  function onSubmit(input: any) {
    console.log(input)
  }

  function NestedConditional({ field, index }: ConProps): JSX.Element | null {
    const todoSubType = watch(`todos[${index}].todoSubType`) as string | undefined

    if (todoSubType) {
      if (todoSubType === "subType1") {
        return (
          <div>
            <label htmlFor="finalInput">Final Input</label>
            <input type="text" name={`todos[${index}].nameOne`} ref={register} defaultValue={field.nameOne} />
          </div>
        )
      } else if (todoSubType === "subType2") {
        return (
          <div>
            <label htmlFor="finalInput">Final Input</label>
            <input type="text" name={`todos[${index}].nameTwo`} ref={register} defaultValue={field.nameTwo} />
          </div>
        )
      } else if (todoSubType === "subType3") {
        return (
          <div>
            <label htmlFor="finalInput">Final Input</label>
            <input type="text" name={`todos[${index}].nameThree`} ref={register} defaultValue={field.nameThree} />
          </div>
        )
      } else if (todoSubType === "subType4") {
        return (
          <div>
            <label htmlFor="finalInput">Final Input</label>
            <input type="text" name={`todos[${index}].nameFour`} ref={register} defaultValue={field.nameFour} />
          </div>
        )
      }
    }

    return null
  }

  function ShowConditional({ field, index }: ConProps): JSX.Element | null {
    const todoType = watch(`todos[${index}].todoType`) as string | undefined

    if (todoType) {
      if (todoType === "type1") {
        return (
          <>
            <fieldset>
              <legend>Pick Subtype</legend>
              <label>
                <input type="radio" name={`todos[${index}].todoSubType`} value="subType1" ref={register} />
                Sub Type 1
              </label>
              <label>
                <input type="radio" name={`todos[${index}].todoSubType`} value="subType2" ref={register} />
                Sub Type 2
              </label>
            </fieldset>
            <NestedConditional field={field} index={index} />
          </>
        )
      } else if (todoType === "type2") {
        return (
          <>
            <fieldset>
              <legend>Pick Subtype</legend>
              <label>
                <input type="radio" name={`todos[${index}].todoSubType`} value="subType3" ref={register} />
                Sub Type 3
              </label>
              <label>
                <input type="radio" name={`todos[${index}].todoSubType`} value="subType4" ref={register} />
                Sub Type 4
              </label>
            </fieldset>
          </>
        )
      }
    }
    return null
  }

  return (
    <div>
      <h1>Test two page</h1>
      <form onSubmit={handleSubmit(onSubmit)}>
        {fields.map((item, index) => {
          return (
            <div key={item.id}>
              <fieldset>
                <legend>Pick Type</legend>
                <label>
                  <input type="radio" name={`todos[${index}].todoType`} value="type1" ref={register} />
                  Type 1
                </label>
                <label>
                  <input type="radio" name={`todos[${index}].todoType`} value="type2" ref={register} />
                  Type 2
                </label>
              </fieldset>
              <ShowConditional field={item} index={index} />
              <div>
                <button type="button" onClick={() => remove(index)}>
                  Remove
                </button>
              </div>
            </div>
          )
        })}
        <button type="button" onClick={() => append({})}>
          Add Todo
        </button>
        <button type="submit">Submit</button>
      </form>
    </div>
  )
}

export default TestTwo

Codesandbox link (Required) https://codesandbox.io/s/react-hook-form-useform-template-forked-buss4?file=/src/index.js

Expected behavior I just want two level conditional form. And it should work.

Desktop (please complete the following information):

• OS: [e.g. iOS] Windows
• Browser [e.g. chrome, safari] Chrome
• Version [e.g. 22] 89

[apoorvmote]

If someone has the same issue I found a solution

import { UseFormMethods } from "react-hook-form"

interface Props {
  register: UseFormMethods["register"]
  watch: UseFormMethod["watch"]
}

This will help you avoid setting register: any and get full typesafety to catch errors faster.

Also bonus you get auto complete to help you code faster.

If I had knows this then I wouldn’t have had the issue to begin with.

[apoorvmote]

Sorry @bluebill1049 I created code sandbox account for first time and I spent long time writing code and I hit save but somehow the code was not saved. So I had to re write the whole thing again.