Удаление объекта из массива - javascript

Я помещаю компонент div в свой массив при нажатии кнопки, если выполняются некоторые условия. И я показываю свой список на мой взгляд. Он работает хорошо, но я столкнулся с проблемой при попытке удалить компонент div из моего массива. Почему мой список не обновляется, когда я пытаюсь удалить объект из массива, но он работает, когда я добавляю объект в массив множество? Я хочу обновить свой массив, даже когда я удаляю объекты из массива, поэтому он должен удалить компонент div, который я удаляю в режиме реального времени.

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

мой код выглядит следующим образом.

class TextVotePost extends Component {
  constructor() {
    super();
    this.state = {
      addOption: 3,
      maxImage: 4,
      optionBtn: true,
    };
    this.addOption = this.addOption.bind(this);
  }

  addOption() {
    this.setState(prevState => ({
      addOption: ++prevState.addOption,
    }));
  }

  render() {
    let list = [];
    const textPollMaxLength = 35;

    function removetextpoll() {
      list.splice(0, 1);
    }

    for (let i = 3; i <= this.state.maxImage; i++) {
      {
        this.state.addOption > i &&
          list.push(
            <div key = {i}>
              <div className = "txt_vote_bar_div">
                <div onClick = {removetextpoll} />

                <Field
                  name = {`inputName${i}`}
                  component = "input"
                  type = "text"
                  placeholder = {`Option ${i}`}
                  maxLength = {textPollMaxLength}
                />
              </div>
            </div>,
          );
      }
    }

    return (
      <form onSubmit = {this.props.handleSubmit}>
        {list}
        <div onClick = {this.addOption}>
          <span>Add Option</span>
        </div>
        }
      </form>
    );
  }
}