下面的代码按预期执行，没有任何问题。
在下面更新的代码中，每一行都有一个唯一的id，通过递增id variable生成。handleRemoveRow函数现在根据id过滤行数组。

import { useEffect, useState } from "react";
import Select from "react-select";

function App(props) {
  //const options = compliments;
  const [state, setState] = useState({
    rows: [
      {
        rowId: 0,
        config: ""
      }
    ],
    id: 1
  });
  const [configOpts, setConfigOpts] = useState([]);

  const handleAddRow = () => {
    const newRow = {
      rowId: state.id,
      config: ""
    };
    setState({
      ...state,
      rows: [...state.rows, newRow],
      id: state.id + 1
    });
  };

  const handleRemoveRow = (idx) => () => {
    const rows = state.rows.filter((FilterdRow) => FilterdRow.rowId !== idx);
    console.log("rows", rows);

    setState({
      ...state,
      rows
    });
  };

  const handleConfigChange = (index) => (selectedOption) => {
    console.log("SelectedOption: " + selectedOption.label);
    const rows = state.rows.map((row) => {
      if (row.id === index) {
        return {
          ...row,
          ["config"]: selectedOption.label
        };
      }
      return row;
    });
    setState({
      ...state,
      rows
    });
  };

  useEffect(() => {
    setConfigOpts([
      { label: "Test1", value: "Test1" },
      { label: "Test2", value: "Test2" },
      { label: "Test3", value: "Test3" },
      { label: "Test4", value: "Test4" }
    ]);
  }, []);

  return (
    <>
      <table>
        {state.rows.map((item, idx) => (
          <tr key={item.rowId}>
            <td>
              <Select
                options={configOpts}
                onChange={handleConfigChange(item.rowId)}
              />
            </td>
            <td>
              <button onClick={handleRemoveRow(item.rowId)}>Remove</button>
            </td>
          </tr>
        ))}
      </table>
      <div>
        <button onClick={handleAddRow}>Add</button>
      </div>
    </>
  );
}

export default App;