Let’s take a wizard form, multi step. Having in mind this example here https://codesandbox.io/p/sandbox/react-hook-form-usefieldarray-forked-l93pxq?file=%2Fsrc%2Findex.tsx%3A9%2C1-19%2C2

I want to have a multi step form, Step1, Step2. Renders same form, but with different value. I open app on Tab1 -> Activity name “Activity1”. Click on Tab2 -> Activity name “Activity2”

It’s kind of working but I think the fields are memoized and they don’t update a second time.

When I click on Tab2, I get the form filled with second activity name “Activity2”, but when I click back on Tab1, even though I can see in ActivityForm that the index is changing, the form values remain the same across the form fields, meaning “Activity2” is still showing up rather than “Activity1” as I’m on the first tab.

I don’t use fieldArrays as I don’t see how it would help me. I just want the value in the fields to change based on the current index.

function ActivityStep({index }) {
  const { register } = useFormContext()

  return (
    <div>
      <h2>Activity Form</h2>
      <input {...register(`test.${currentStepIndex}.activity.name`, { required: true })} />
      <input
        {...register(`test.${currentStepIndex}.activity.instructions`, { required: true })}
      />
    </div>
  );
}

function ActivityForm({activity, selectedStepId}) {
  const currentStepIndex = activity.steps.findIndex((step: any) => step.id === selectedStepId)

  return (
    <div>
      <ActivityForm
        currentStepIndex={currentStepIndex}
      />
    </div>
  );
}