Срез происходит в коде, но не обновляется в пользовательском интерфейсе

• в исходном состоянии есть три раскрывающихся меню.
• после того, как я выберу первое раскрывающееся меню, загружаются вторые раскрывающиеся значения
• после того, как я выберу вторые раскрывающиеся значения.
• новый набор выпадающих нагрузок.
• когда я выбираю кнопку удаления второго набора.
• он не удаляет этот набор, но удаляет первый набор.
• когда я отлаживал метод removeSelectedValue, срезы выполняются правильно, но не обновляются при обновлении
• Можете ли вы сказать мне, как передать значения queryComponents, чтобы они обновлялись в пользовательском интерфейсе.
• подскажите, как это исправить.
• так что в будущем я сам исправлю.
• предоставляя соответствующий фрагмент кода и песочницу ниже.
• весь мой код находится в demo.js

https://codesandbox.io/s/4x9lw9qrmx

removeSelectedValue = index => {
    console.info("removeSelectedValue--->", index);
    let seletedValues = this.state.queryComponents;
    seletedValues.splice(index, 1);
    console.info("spliced Values--->", seletedValues);
    this.setState({ queryComponents: seletedValues });
  };

  render() {
    let queryComp = this.state.queryComponents.map((value, index) => {
      return (
        <AutoCompleteComponent
          key = {index}
          value = {value}
          index = {index}
          valueSelected = {this.getSelectedValue}
          removeSeleted = {this.removeSelectedValue}
        />
      );
    });

    return <div>{queryComp}</div>;
  }