React Final Form: guide with Handling Field Arrays after Dynamic Field Removal
Hey everyone, I'm running into an issue that's driving me crazy. I've searched everywhere and can't find a clear answer. I'm working with React Final Form to create a dynamic form that allows users to add and remove items from a field array. Everything works as expected when adding new fields, but I'm working with an scenario where, after removing a field, the form state appears to be inconsistent. Specifically, when I remove a field, the remaining fields do not seem to update correctly, and I get an behavior that says `Invariant Violation: Field 'fieldName' is not defined` when submitting the form. Here's a simplified version of my code: ```jsx import React from 'react'; import { Form, Field, FieldArray } from 'react-final-form'; const DynamicForm = () => { return ( <Form onSubmit={formValues => console.log(formValues)} render={({ handleSubmit }) => ( <form onSubmit={handleSubmit}> <FieldArray name="items"> {({ fields }) => ( <div> {fields.map((name, index) => ( <div key={name}> <Field name={`${name}.value`} component="input" placeholder="Item" /> <button type="button" onClick={() => fields.remove(index)}>Remove</button> </div> ))} <button type="button" onClick={() => fields.push({ value: '' })}>Add Item</button> </div> )} </FieldArray> <button type="submit">Submit</button> </form> )} /> ); }; export default DynamicForm; ``` I've tried wrapping the `FieldArray` in a `React.Fragment` and verified that my field names are unique, but the scenario continues. I also checked my React and Final Form versions—React 17 and Final Form 6.13.3. Any suggestions on how to ensure that the form state updates correctly after removing fields? Is there a specific way to handle the state when dynamically modifying field arrays that I might be missing? This is part of a larger web app I'm building. Any ideas what could be causing this? I've been using Javascript for about a year now. Any suggestions would be helpful.