Estoy haciendo una página con javascript react y formik y tengo dos menús desplegables en un formulario, los hice funcionar, pero ahora que estoy usando ambos, cuando elijo un valor con el valor del otro se restablece. No sé cómo expresarlo mejor, así que agregaré un gif de lo que sucede:

Estos son mis menús desplegables (ambos idénticos simplemente tomando valores de un objeto diferente).

 <Field as="select" className="custom-select d-block w-100" name="fk_room" required > <option></option> {this.state.doctors.map((doctors) => ( <option value={doctors.surname} selected> {" "} {doctors.surname} </option> ))} </Field>

Tengo la ligera sospecha de que es probable que tenga que ver conmigo configurando el estado dos veces

 componentDidMount() { userService.getAllRooms().then((result) => { this.setState({ rooms: result.map(({ name }) => name), }); }); userService.getAllEmployees().then((result) => { this.setState({ doctors: result.map(o => ({name: o.name, surname: o.surname, specialization: o.specialization})), }); }); }

a pesar de que con console.log parece que obtengo los valores correctamente, asumo que está sucediendo algo extraño ya que cada clic en el menú desplegable llama al componenteDidMount nuevamente (creo). ¿Alguien ha lidiado con un problema similar? ¿Tiene que ver conmigo configurando el estado dos veces o necesito guardar el valor de los menús desplegables de alguna manera? (Funcionó bien con solo 1 menú desplegable donde llamé al estado una vez). Lo siento si este es un territorio completamente novato. Soy muy inexperto en javascript y reacciono. PD: los menús desplegables son completamente independientes, todas las guías que encontré en línea eran sobre menús desplegables dependientes, pero este no es el resultado final que quiero, ambos nunca deberían cambiar desde la llamada inicial para llenar los objetos.