antd中的动态多级嵌套形式

Question

我有一个姓名列表，我需要在多级别中添加名字和姓氏，我能够做到这一点，但例如，当我执行删除时，我面临问题。我添加了 3 个姓名列表，当我尝试删除第一个列表时，第二个和第三个数据也消失了，这是片段

const App: React.FC = () => {
  const onFinish = (values: any) => {
    console.log("Received values of form:", values);
  };

  const nameFields = (field, index, remove, fields) => {
    try {
      return (
        <div key={field.key}>
          <Form.Item label="first name" name={[index, "fn"]}>
            <Input />
          </Form.Item>
          <Form.Item label="last name" name={[index, "ln"]}>
            <Input />
          </Form.Item>
          {fields.length > 1 ? (
            <MinusCircleOutlined onClick={() => remove(field.name)} />
          ) : (
            <></>
          )}
        </div>
      );
    } catch (error) {
      console.error("Error in nameFields", error);
      return <></>;
    }
  };

  const nameFormList = (index) => {
    try {
      return (
        <Form.List name={[index, `${index}`]}>
          {(fields, { add, remove }) => (
            <Card title={`name list ${index + 1}`}>
              <>
                {fields.map((field, index) =>
                  nameFields(field, index, remove, fields)
                )}
                <Form.Item>
                  <Button
                    type="dashed"
                    onClick={() => add()}
                    block
                    icon={<PlusOutlined />}
                  >
                    add names
                  </Button>
                </Form.Item>
              </>
            </Card>
          )}
        </Form.List>
      );
    } catch (error) {
      console.error("Error in nameFormList", error);
      return <></>;
    }
  };

  return (
    <Form name="dynamic_form_nest_item" onFinish={onFinish} autoComplete="off">
      <Form.List name="name-list">
        {(fields, { add, remove }) => (
          <>
            {fields.map((field, index) => (
              <div
                key={field.key}
                style={{ display: "flex", alignItems: "center", width: "100%" }}
              >
                <Form.Item name={[index, `${index}`]} style={{ width: "85%" }}>
                  {nameFormList(index)}
                </Form.Item>
                {fields.length > 1 ? (
                  <MinusCircleOutlined onClick={() => remove(field.name)} />
                ) : (
                  <></>
                )}
              </div>
            ))}
            <Form.Item>
              <Button
                type="dashed"
                onClick={() => add()}
                style={{ width: "85%" }}
                block
                icon={<PlusOutlined />}
              >
                add name list
              </Button>
            </Form.Item>
          </>
        )}
      </Form.List>
    </Form>
  );
};

export default App;

我错过了什么吗？ 有人可以帮忙吗？ 预先感谢。

这里是codesandbox https://codesandbox.io/s/dynamic-form-nest-items-antd-4-24-12-forked-h23w7d?file=/demo.tsx