如何在react-final-form字段名中动态添加对象？

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

const MyForm = () => (
  <Form
    onSubmit={onSubmit}
    render={({ handleSubmit }) => (
      <form onSubmit={handleSubmit}>
        <FieldArray name="myArray">
          {({ fields }) =>
            fields.map((name, index) => (
              <div key={name}>
                <Field
                  name={`${name}.fieldName`}
                  component="input"
                  type="text"
                  placeholder="Field Name"
                />
                <Field
                  name={`${name}.fieldValue`}
                  component="input"
                  type="text"
                  placeholder="Field Value"
                />
                <button type="button" onClick={() => fields.remove(index)}>
                  Remove
                </button>
              </div>
            ))
          }
        </FieldArray>
        <button type="button" onClick={() => fields.push({})}>
          Add Field
        </button>
        <button type="submit">Submit</button>
      </form>
    )}
  />
);