Using final-form-array in a nested object

Question

I have a scenario where I have multiple grids and in each grid can have multiple rows that can be deleted.

{ 
document: [{
rows: [{
make: "Tesla"
}]
}

I wanted to do something like <FieldArray name="document[0]"> that way, I can give the grid add and remove functionality but it seems the fieldarray only takes single nodes. Is there a work around for this or am i doing something wrong?

Initially I had document1: { [{...fields}] } so useField looked like this:

useField(`${fieldKey}${fieldIndex}[${rowIndex}].${field}`)

but I wanted to use yup schema validations due to issues with ag-grid and validations at the cell level so I figured it'd be easier if I used generic keys.

fields.removeBatch(gridApi.getSelectedNodes().map(({ rowIndex }) => rowIndex));

Answer 1

Turns out I was using the wrong path. I needed to use

<FieldArray name={`${fieldKey}.${fieldIndex}.rows`}>

This matched the new structure. So FieldArray does support nested objects, you just need to get the names right.