how to add items in the List dynamic (dropdown dynamic)

Question

good evening I have a list of choices, in case I want to add a choice to the list!! that's my question several ideas have been tried, unfortunately without success. how to add an input at the end of my drop-down list, and in the case where I duplicate the line, then all this duplicates; suggestions please

Thanks for your help

index.js

import React from "react";
import ReactDOM from "react-dom";
import Liste1 from "./components/liste1";
import "./styles.css";
 
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Liste1 />
      </header>
    </div>
  );
}
 
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);``````

components/listchoix.js:

import React from "react";
const Listchoix = (props) => {
  return props.Details.map((val, idx) => {
    let type0 = `type0-${idx}`,
      type1 = `type1-${idx}`,
      // dateOfPublish = `dateOfPublish-${idx}`,
      type2 = `type2-${idx}`,
      type4 = `type4-${idx}`;
    return (
      <div className="form-row" key={val.index}>
        <div className="col">
          <label>Type0</label>
          <select
            className="form-control"
            name="type0"
            id={type0}
            data-id={idx}
            style={{ width: 850 }}
          >
            <option>Select</option>
            <option>choice1</option>
            <option>choice2</option>
            <option>choice3</option>
            <option>choice4</option>
            <option>choice5</option>
          </select>
        </div>
        <div className="col"></div>
        <div className="col"></div>
 
        <div className="col"></div>
        <div className="col p-4">
          {idx === 0 ? (
            <button
              onClick={() => props.add()}
              type="button"
              className="btn btn-primary text-center"
            >
              <i className="fa fa-plus-circle" aria-hidden="true" />
            </button>
          ) : (
            <button
              className="btn btn-danger"
              onClick={() => props.delete(val)}
            >
              <i className="fa fa-minus" aria-hidden="true" />
            </button>
          )}
        </div>
      </div>
    );
  });
};
export default Listchoix;

components/liste1.js

import React from "react";
import Listchoix from "./listchoix";
 
class Liste1 extends React.Component {
  state = {
    Details: [
      {
        index: Math.random(),
        Type0: "",
      },
    ],
  };
  handleChange = (e) => {
    if (["Type0"].includes(e.target.Type0)) {
      let Details = [...this.state.Details];
      Details[e.target.dataset.id][e.target.Type0] = e.target.value;
    } else {
      this.setState({ [e.target.Type0]: e.target.value });
    }
  };
  addNewRow = (e) => {
    this.setState((prevState) => ({
      Details: [
        ...prevState.Details,
        {
          index: Math.random(),
          Type0: "",
        },
      ],
    }));
  };
 
  deteteRow = (index) => {
    this.setState({
      Details: this.state.Details.filter((s, sindex) => index !== sindex),
    });
  };
 
  clickOnDelete(record) {
    this.setState({
      Details: this.state.Details.filter((r) => r !== record),
    });
  }
  render() {
    let { Details } = this.state;
    return (
      <div className="content">
        <form onSubmit={this.handleSubmit} onChange={this.handleChange}>
          <div className="row" style={{ marginTop: 20 }}>
            <div className="col-sm-1" />
            <div className="col-sm-10">
              <h2 className="text-center"> choice </h2>
              <div className="container">
                <div className="row">
                  <Listchoix
                    add={this.addNewRow}
                    delete={this.clickOnDelete.bind(this)}
                    Details={Details}
                  />
                </div>
              </div>
            </div>
            <div className="col-sm-1" />
          </div>
        </form>
      </div>
    );
  }
}
export default Liste1;

styles.css:

.App {
  font-family: sans-serif;
  text-align: center;
}

package.json:

{
  "name": "dynamically-add-and-delete-input-fields-in-form-using-react-js",
  "version": "1.0.0",
  "description": "Add and Delete  Input from form ",
  "keywords": [],
  "main": "src/index.js",
  "dependencies": {
    "react": "16.12.0",
    "react-dom": "16.12.0",
    "react-scripts": "3.0.1"
  },
  "devDependencies": {
    "typescript": "3.3.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

the img enter image description here

thanks