Adding dynamic <option> to select doesn't show unless I switch the field

Question

I want to be able to add Group Members dynamically and I simply used + button for that. The problem is - it adds the input value of the prompt, but I can't see it unless I switch fields and type something else. Here is the YouTube link for better understanding: https://youtu.be/sA0WB2Le3Fg

<button id="add" type="button" onClick={(e)=>this.addMember(e)}>+</button>

The state :

 members: [
        {member:"Berin"},
        {member:"Cristian"},
        {member:"Raddy"},
        {member:"Ventsislav"},
      ]

The function :

  addMember = (e) => {
    let input = prompt("Enter the name");
    this.state.members.push({member:input});
    e.preventDefault();
  }

The mapping function :

let members = this.state.members.map((member,index)=>{
          return <option value={member.member} key={index}>{member.member}</option>
        })

The select field :

<select id="groupMember" onChange={this.changeMember} name="member" required>
  <option defaultValue="" selected disabled>Select group member</option>
 {members}
</select>

Answer 1

Try this:

  addMember = (e) => {
    let input = prompt("Enter the name");
    let newMemberList = this.state.members;
    newMemberList.push(input);
    this.setState({ members: newMemberList });
    e.preventDefault();
  }

Answer 2

Recommended approach in the later React versions looks like this:

addMember = (e) => {
    let input = prompt("Enter the name");
    this.setState(prevState => ({
        members: [...prevState.members, input]
    }))
    e.preventDefault();
}