Recently, I've experienced a weird bug related to ReactJS OnChange and OnClick function. Here's my code

  removeHandler(e) {
    var targetValue = e.target.getAttribute("value");
    var answerNodes = document.getElementsByClassName("answer__container");
    for (var answerNode in answerNodes) {
      if (answerNodes.hasOwnProperty(answerNode)) {
        if (answerNode === targetValue) {
          answerNodes[answerNode].remove();
        }
      }
    }
  }
  onChangeAnswers(e) {
    var answerNodes = document.getElementsByClassName("answer");
    var result = Array.from(answerNodes).map((answer) => {
    return answer.value;
    });
    this.setState({
      answers: result
    });
    console.log(this.state.answers);
  }

The interface

Particularly, when I click on remove buttons, the answer will be deleted, but after that, if I click on the answer input and press any key, the answer will disappear again. Can anyone help me solve this problem? Thanks in advance!