React Hook Form: Controlling Nested Fields with useFieldArray but Encountering Unexpected Reset Behavior
I can't seem to get I'm relatively new to this, so bear with me. I'm using React Hook Form v7 with TypeScript to manage a form that includes dynamic nested fields using `useFieldArray`. However, I ran into an issue where resetting the form unexpectedly clears the nested fields even though I want to retain their values. Here's a simplified version of my code: ```typescript import React from 'react'; import { useForm, useFieldArray } from 'react-hook-form'; interface FormValues { users: { name: string; age: number }[]; } const MyForm: React.FC = () => { const { control, handleSubmit, reset } = useForm<FormValues>({ defaultValues: { users: [{ name: '', age: 0 }] } }); const { fields, append, remove } = useFieldArray({ name: 'users', control }); const onSubmit = (data: FormValues) => { console.log('Submitted Data:', data); }; const resetForm = () => { reset({ users: [{ name: 'Default', age: 25 }], // I want to set defaults here }); }; return ( <form onSubmit={handleSubmit(onSubmit)}> {fields.map((field, index) => ( <div key={field.id}> <input {...register(`users.${index}.name`)} defaultValue={field.name} /> <input {...register(`users.${index}.age`)} defaultValue={field.age} type="number" /> <button type="button" onClick={() => remove(index)}>Remove</button> </div> ))} <button type="button" onClick={() => append({ name: '', age: 0 })}>Add User</button> <button type="button" onClick={resetForm}>Reset</button> <input type="submit" /> </form> ); }; export default MyForm; ``` When I call `resetForm`, the nested fields get reset to the new default values, but any user-added entries are lost. I was expecting that only the newly appended fields would reset while keeping the existing ones intact. I'm trying to ensure that when I reset the form, the dynamically added fields retain their values unless explicitly cleared. I've looked into the `reset` function and the `defaultValues` option, and I think I'm missing something in how to properly manage the state of dynamic fields. Is there a way to maintain the current state of nested fields during a reset other than manually managing state outside of React Hook Form? Any guidance would be greatly appreciated. I'm working on a API that needs to handle this. What's the best practice here? The stack includes Typescript and several other technologies. What's the correct way to implement this? For reference, this is a production microservice.