React- OnClick of Add button add new dropdown and disabled previously selected option in dropdown

Question

We have 3 groups to show in the dropdown. if user selects one group in first dropdown then that group should be disabled in second dropdown and same for third dropdown. User will click on "Add Another" button which will add dropdown in next line. if user select other group in next dropdown then in the third dropdown previous 2 selected options should be disabled. Each dropdown should have "Add Another" and "Delete' button to Add new dropdown and delete that dropdown from UI. Last dropdown should not have "Add another" button. Below is my code for reference but it is not working.

      import React, { useState } from "react";
      import Select from "react-select";
      import { v4 as uuidV4 } from "uuid";
      import "./App.css";
      export default function App() {
      //clone form logic
      const data = [
      { value: "1", label: "MidTerm", isdisabled: false },
      { value: "2", label: "Long Term", isdisabled: false },
      { value: "3", label: "Life Long", isdisabled: false },
      ];
      const [selectList, setInputList] = useState([
      { id: uuidV4(), service_type: "", service_value: "" },
      ]);
      const [selectOptions, setSelectOptions] = useState(data);
      // handle input change
      const handleInputChange = (id) => (evt) => {
      setInputList((list) =>
      list.map((el) =>
        el.id === id
          ? {
              ...el,
              service_type: evt.label,
              service_value: evt.value,
              [evt.id]: evt.id,
            }
          : el
      )
      );
      let pos = selectOptions.findIndex((item) => item.label === evt.label);
      selectOptions[pos].isdisabled = true;
      };
      //remove and add btn logic
      const handleRemoveClick = (id) => {
      let obj = selectList.find((o) => o.id === id);
      let pos = selectOptions.findIndex(
      (item) => item.label === obj.service_type
      );
      selectOptions[pos].isdisabled = false;
      setInputList((selectList) => selectList.filter((el) => el.id !== id));
      };
      // handle click event of the Add button
      const handleAddClick = () => {
      setInputList([...selectList, { id: uuidV4(), service_type: "" }]);
      };
      return (
      <div className="App">
      <typography guttorbuttom align="center">
        <h1>React Select With Disable Option</h1>
      </typography>
      {selectList.map((x, i) => {
        return (
          <div key={x.id}>
            <div style={{ minWidth: 140 }}>
              <label id="select-label">Type Of Group</label>
              <Select
                value={i.service_type}
                onChange={handleInputChange(x.id)}
                options={selectOptions}
                isOptionDisabled={(option) => option.isdisabled}
              />
            </div>
            <div>
              {selectList.length !== 1 && (
                <button
                  className="mr10"
                  onClick={() => handleRemoveClick(x.id)}
                >
                  Remove
                </button>
              )}
              {selectList.length - 1 === i &&
                selectList.length !== selectOptions.length && (
                  <button onClick={handleAddClick}>Add</button>
                )}
            </div>
          </div>
        );
      })}
      </div>
      );
      }