我有两个andd选择字段在一行和一个+图标添加另一行与两个下拉框，如图所示。
点击第一个下拉列表值，相关数据应显示在下拉列表2中，点击+图标将在第二行分别添加两个下拉列表，要求相同，点击第二行第一个下拉列表值。相关值将显示在第二行第二个下拉字段中。
发布日期：
两行的第二个下拉列表值始终相同。当我选择第二行的第一个下拉列表值时，相关值显示在第二行的第二个下拉列表中，但相同的值反映在第一行的第二个下拉列表中。
下面是我的代码片段，我正在使用antd Form来实现这一点。对于单行下拉菜单，它可以正常工作，但当我通过点击+图标添加另一行时，出现了一个问题。是否有其他方法来实现这一点？
我添加的代码段在某些环境中可能无法工作。

import React, { useRef, useEffect, useState } from "react";
import { Form, Select, Col, Row, Button, Checkbox } from "antd/lib";
import { PlusOutlined, MinusOutlined } from "@ant-design/icons";
const { Option } = Select;

const DropdownComponent = (props) => {
  const addBtnRef = useRef(null);
  const [dropDownOneData, setDropDownOneData] = useState([]);
  const [dropDownTwoData, setDropDownTwoData] = useState([]);
  const [dropDownOneValue, setDropDownOneValue] = useState("");
  const dropDownOneTwoValues: [
    [
      {
        dropDownOne: {
          key: "test_t";
          value: "test";
        };
        dropDownTwo: [
          {
            key: "key1";
            value: "Value1";
          },
          {
            key: "key2";
            value: "Value2";
          }
        ];
      }
    ],
    [
      {
        dropDownOne: {
          key: "test_t1";
          value: "test1";
        };
        dropDownTwo: [
          {
            key: "key3";
            value: "Value3";
          },
          {
            key: "key4";
            value: "Value4";
          }
        ];
      }
    ]
  ];

  useEffect(() => {
    addBtnRef.current.click();
    // set dropdownone values
    const dropDownOneData = dropDownOneTwoValues?.map(
      (searchField) => searchField[0].dropDownOne
    );
    setDropDownOneData(dropDownOneData);
  }, []);

  useEffect(() => {
    // set related dropDownTwo values on selected dropdownOne value
    const dropDownTwoValues = dropDownOneTwoValues
      .flat()
      .filter((values) => values.dropDownOne.key === dropDownOneValue)
      .flatMap((value) => value.dropDownTwo);
    setDropDownTwoData(dropDownTwoValues);
  }, [dropDownOneValue]);

  const handleDropDownOne = (value) => {
    setDropDownOneValue(value);
  };

  function renderDropDownValues(options) {
    return options.map((option) => {
      if (option.key && option.value) {
        return (
          <Option
            key={option.key}
            value={option.key}
            disabled={option.disabled}
          >
            {option.value}
          </Option>
        );
      }

      return (
        <Option key={option} value={option}>
          {option}
        </Option>
      );
    });
  }

  return (
    <>
      <Row>
        <Col>
          <Form.List>
            {(fields, { add, remove }) => {
              {
                console.log("fields...", fields);
              }
              return (
                <div
                  className="border"
                  style={{
                    padding: "20px",
                    marginBottom: "25px",
                    marginTop: "-30px"
                  }}
                >
                  {fields.map((value, index) => {
                    return (
                      <Row key={index} style={{ marginBottom: 8 }}>
                        <Col>
                          <Form.Item
                            rules={[
                              { required: true, message: "Select a value" }
                            ]}
                            name={value.Name}
                          >
                            <Select
                              key={index}
                              className="w-100"
                              showSearch={true}
                              optionFilterProp="children"
                              filterOption={(input, option) =>
                                option?.children
                                  .toLowerCase()
                                  .includes(input.toLowerCase())
                              }
                              placeholder="Select"
                              onChange={(value) => handleDropDownOne(value)}
                              value={dropDownOneValue}
                            >
                              {renderDropDownValues(dropDownOneData)}
                            </Select>
                          </Form.Item>
                        </Col>
                        <Col>
                          <Form.Item
                            rules={[
                              { required: true, message: "Select a value" }
                            ]}
                            name={value.name}
                          >
                            <Select
                              className="w-100"
                              showSearch={true}
                              optionFilterProp="children"
                              filterOption={(input, option) =>
                                option?.children
                                  .toLowerCase()
                                  .includes(input.toLowerCase())
                              }
                              placeholder="Select"
                            >
                              {renderDropDownValues(dropDownTwoData)}
                            </Select>
                          </Form.Item>
                        </Col>
                      </Row>
                    );
                  })}
                  <Row justify="end">
                    <Col>
                      <Form.Item>
                        <Button
                          ref={addBtnRef}
                          shape="circle"
                          size="small"
                          className="center"
                          data-testid="add-clause-btn"
                          icon={
                            <PlusOutlined
                              className="primary-color"
                              style={{ marginTop: "1px" }}
                            />
                          }
                          onClick={() => {
                            add();
                          }}
                        />
                      </Form.Item>
                    </Col>
                  </Row>
                </div>
              );
            }}
          </Form.List>
          )
        </Col>
      </Row>
    </>
  );
};

export default DropdownComponent;