Ant Design, как обработать доступ к значениям Form.List из лежащей в основе структуры данных?

Question

Я пытаюсь гр asp Form.List от Ant Design . Я уже понял, что он содержит FieldData[], где каждый элемент содержит name, key, fieldKey, но я не знаю, как использовать это для доступа к его значениям. Я попытался решить следующие два варианта использования на основе образца кода, который я нашел в другом вопросе :

• Нижний колонтитул суммирует все возрасты в общий возраст для всех пользователей
• Добавление сортировщиков по возрасту и имени, также известных как числовые и строковые столбцы

Сжатие из приведенного выше примера codesandbox У меня есть следующий код формы и таблицы, оставляя оба TODO, которые я не в состоянии решить. Можете ли вы помочь мне?

Если в целом у вас есть знания о Form.List, это также очень поможет? Например, объясняя, зачем мне это нужно для динамических c форм и что он делает внутри и для компонента?

Любая помощь будет признательна, большое спасибо.

import { Button, Form, Row, notification, Table, InputNumber } from "antd";
import React, { useState } from "react";
import { useForm } from "antd/lib/form/util";

const TestForm: React.FC = () => {
 const [data, setData] = useState({ users: [] });
 const [form] = useForm();
 const [editingIndex, setEditingIndex] = useState<number | undefined>(
   undefined
   );

 const onFinish = (values: any) => {
   notification.success({
       message: "Submit",
       description: `Received values of form: ${JSON.stringify(values)}`
   });
   setData(values);
   };

 return (
  <Form
  form={form}
  name="dynamic_form_item"
  onFinish={onFinish}
  initialValues={data}
  >
   <Form.List name="users">
    {(users, { add, remove }) => (
     <Table
      dataSource={users}
      pagination={false}
      footer={fields => {
       // TODO calculate age sum from fields
       return (
           <Button>Add User</Button>
       );
      }}
      >
       <Table.Column
           dataIndex={"age"}
           title={"Age"}
           width={125}
           sorter={() => {
             // TODO build something to sort here sorter: (a, b) => a.weight - b.weight,
             return 0;
           }}
           render={(value, row, index) => {
            return (
             <EditableFormItem
                 name={[index, "age"]}
                 editing={index === editingIndex}
                 className={"ant-form-item-no-bottom-margin"}
                 >
                 <InputNumber placeholder="age" min={0} max={150} />
             </EditableFormItem>
            );
           }}
       />
      </Table>
     )}
    </Form.List>
   </Form>
  )};

export default TestForm;