Error: useFieldArray must be used inside of a <Form> component after upgrade to TS 3.8.2

[mikhailbartashevich]

Are you submitting a bug report or a feature request?

What is the current behavior?

What is the expected behavior?

Sandbox Link

What's your environment?

Other information

[abrad45]

Do you have any information about this? I don't think your issue can be debugged or solved with this issue in its current state.

[glowlh]

I have the same problem. Is there any news?

"react-final-form": "6.5.2", "react-final-form-arrays": "3.1.3", "final-form-arrays": "3.0.2", "final-form": "4.20.1", "typescript": "4.0.5"

code example:

import { Form, Field } from 'react-final-form'
import arrayMutators from 'final-form-arrays'
import { FieldArray } from 'react-final-form-arrays'

const MyForm = () => (
  <Form
    onSubmit={onSubmit}
    mutators={{
      // potentially other mutators could be merged here
      ...arrayMutators
    }}
    validate={validate}
    render={({ handleSubmit, pristine, invalid }) => (
      <form onSubmit={handleSubmit}>
        <FieldArray name="customers">
          {({ fields }) => (
            <div>
              {fields.map((name, index) => (
                <div key={name}>
                  <div>
                    <label>First Name</label>
                    <Field name={`${name}.firstName`} component="input" />
                  </div>
                  <div>
                    <label>Last Name</label>
                    <Field name={`${name}.lastName`} component="input" />
                  </div>
                  <button type="button" onClick={() => fields.remove(index)}>
                    Remove
                  </button>
                </div>
              ))}
              <button
                type="button"
                onClick={() => fields.push({ firstName: '', lastName: '' })}
              >
                Add
              </button>
            </div>
          )}
        </FieldArray>
      </form>
    )}
  />
)```