select dynamic form with react js (append and remove select)

Question

I need help please, I have a list of choices in the first line, I have two buttons + and - of the spell when I click on + another line is duplicated and if I click on - it deletes the line except the first line here is my code, I made several attempts but too bad I can't. Thanks for your help

the code: app2.js

import React, { Component } from "react";
import { Modal, Button, Select, Divider, Tooltip, Input } from "antd";
import {
  PlusOutlined,
  PlusCircleOutlined,
  MinusCircleOutlined,
} from "@ant-design/icons";
import "antd/dist/antd.css";
import { connect } from "react-redux";

///pour name1
const { Option } = Select;
let index1 = 0;

export default class app2 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isModalVisible: false,
      //pour name1
      inputfilds: [
        {
          items1: ["jack1", "lucy1"],
          name1: "",
        },
      ],
    };
  }
  //pour name1
  onNameChange1 = (event) => {
    this.setState({
      name1: event.target.value,
    });
  };

  addItem1 = () => {
    console.log("addItem1");
    const { items1, name1 } = this.state;
    this.setState({
      items1: [...items1, name1 || `New item1 ${index1++}`],
      name1: "",
    });
  };

  handleAddFields() {
    this.setState({
      ...this.state.inputfilds,
      items1: ["jack1", "lucy1"],
      name1: "",
    });
  }

  render() {
    return (
      <div>
        <div>
          {/* nom medicament */}
          {this.state.inputfilds.map((el) => {
            return (
              <div>
                <Select
                  style={{ width: 450 }}
                  placeholder="tab1"
                  dropdownRender={(menu1) => (
                    <div>
                      {menu1}
                      <Divider style={{ margin: "4px 0" }} />
                      <div
                        style={{
                          display: "flex",
                          flexWrap: "nowrap",
                          padding: 8,
                        }}
                      >
                        <Input
                          style={{ flex: "auto" }}
                          value={el.name1}
                          onChange={this.onNameChange1}
                        />
                        <a
                          style={{
                            flex: "none",
                            padding: "8px",
                            display: "block",
                            cursor: "pointer",
                          }}
                          onClick={this.addItem1}
                        >
                          <PlusOutlined /> Add item1
                        </a>
                      </div>
                    </div>
                  )}
                >
                  {el.items1.map((item1) => (
                    <Option key={item1}>{item1}</Option>
                  ))}
                </Select>{" "}
                <Tooltip title="search">
                  <Button
                    type="primary"
                    shape="circle"
                    icon={<PlusCircleOutlined />}
                    onClick={this.handleAddFields}
                  />
                </Tooltip>{" "}
                <Tooltip title="search">
                  <Button
                    type="primary"
                    shape="circle"
                    icon={<MinusCircleOutlined />}
                  />
                </Tooltip>{" "}
              </div>
            );
          })}
        </div>
      </div>
    );
  }
}

and the index.js

import React from "react";
import ReactDOM from "react-dom";

import App2 from "./app2";
import * as serviceWorker from "./serviceWorker";

ReactDOM.render(
  <React.StrictMode>
    <App2 />
  </React.StrictMode>,
  document.getElementById("root")
);

serviceWorker.unregister();

the img: