Изменение значения полей динамического выбора влияет на все поля в реакции

Я пытаюсь динамически добавлять поля выбора при щелчке, каждый блок содержит 2 поля выбора, и я хочу изменить параметры второго поля на основе первого.

Половину успел сделать, но второе поле меняется у всех блоков, а не только у предполагаемого.

import React from "react";
import ReactDOM from "react-dom";
import { Pane, Button, Heading, SelectField } from "evergreen-ui";

function SelectFieldExample() {
  const [conditionIndex, setConditionIndex] = React.useState(0);
  const [selectValue, setSelectValue] = React.useState("");
  const [operatorValue, setOperatorValue] = React.useState("");

  const [numberOfConditions, setNumberOfConditions] = React.useState(1);

  const handleselect = (e) => {
    const { name } = e.target;
    const { value } = e.target;

    setSelectValue((selectValue) => ({
      ...selectValue,
      [name]: value
    }));
  };

  const handleoperator = (e) => {
    const { name } = e.target;
    const { value } = e.target;

    setOperatorValue((operatorValue) => ({
      ...operatorValue,
      [name]: value
    }));
  };

  const onAddCondition = (event) => {
    setConditionIndex(conditionIndex);
    setNumberOfConditions(numberOfConditions + 1);
  };

  return (
    <Pane maxWidth = {654}>
      <Pane width = {900}>
        <form>
          <Pane display = "flex" flexDirection = "column" gap = {25}>
            <Heading>Conditions</Heading>
            <Pane marginTop = {-15}>
              {/* ------------------------------------------------------ */}
              {Array.from(Array(numberOfConditions)).map((x, index) => (
                <Pane
                  id = {index}
                  key = {conditionIndex}
                  marginTop = {-10}
                  display = "flex"
                  alignItems = "center"
                  gap = {10}
                >
                  <SelectField
                    minWidth = {180}
                    value = {selectValue[name]}
                    onChange = {(e) => handleselect(e, conditionIndex)}
                    name = {"conditions[" + conditionIndex + "][field_id]"}
                  >
                    <optgroup label = "Data">
                      <option value = "tag">Tag</option>
                      <option value = "events">Event</option>
                    </optgroup>
                  </SelectField>

                  <SelectField
                    minWidth = {180}
                    value = {
                      operatorValue[
                        "conditions[" + conditionIndex + "][operator]"
                      ]
                    }
                    onChange = {(e) => handleoperator(e, conditionIndex)}
                    name = {"conditions[" + conditionIndex + "][operator]"}
                  >
                    {selectValue[
                      "conditions[" + conditionIndex + "][field_id]"
                    ] === "events" && <option value = "Event">Event</option>}
                    {selectValue[
                      "conditions[" + conditionIndex + "][field_id]"
                    ] === "tag" && <option value = "Tag">Tag</option>}
                  </SelectField>
                </Pane>
              ))}
              {/* ----------------------------------------------------*/}
            </Pane>
          </Pane>
        </form>

        <Button
          width = {110}
          onClick = {onAddCondition}
          marginRight = {12}
          size = "medium"
        >
          Add condition
        </Button>
      </Pane>
    </Pane>
  );
}

ReactDOM.render(<SelectFieldExample />, document.getElementById("root"));

Посмотреть можно в Codesandbox

Я надеюсь, что кто-то может помочь мне с этим. Спасибо