Estoy usando React Select para mostrar la lista de elementos. Al cambiar de artículo, quiero mostrar una advertencia basada en alguna bandera. Si el indicador es verdadero, se mostrará el cuadro de diálogo y confirmaré que quiero permitir el cambio. Para cada cambio, estoy almacenando el elemento seleccionado en el efecto de uso del estado local. Al hacer clic en confirmar desde el cuadro de diálogo o si el indicador es falso, estoy enviando acciones para almacenarlas en la tienda redux.

Tengo un problema cuando aparece el cuadro de diálogo y al hacer clic en confirmar, el elemento en el menú desplegable está cambiando, pero se llama a onChange nuevamente con el primer valor, por lo tanto, el menú desplegable vuelve al valor inicial.

¿Por qué se llama a onChange dos veces?

Intenté event.preventDefault , pero no funcionó.

 const [name, setName] = React.useState(); const changeValue = (event,selectedItem) => { event.preventDefault() setName(selectedItem) // storing in UseState hook if(flag){ props.toggleWarningDialog(true); } else { props.onChangeItem(selectedItem); } } const handleConfirmChange = (event) => { event.preventDefault() props.onChangeItem(name); //getting from useState hook and storing in redux by dispatching an action }