Tengo un problema con DialogWrapper donde está abierto dos veces cuando hice clic en el botón Delete en Diálogo.

Hay dos eventos, en el primer evento, el cuadro de diálogo está abierto y cuando se hace clic en el botón Eliminar, debe mostrar el botón giratorio de progreso. Una vez finalizada la acción, se cierra el diálogo.

 const [openConfirmDelete, setOpenConfirmDelete] = useState(false); const [isDeleting, setIsDeleting] = useState(false); const handleConfirmDelete = () => { setOpenConfirmDelete(true); }; const handleDeleteCompleted = async () => { setIsDeleting(true); const response = await deleteExpense(fetchExpenseId); if(response) { setOpenConfirmDelete(false); enqueueSnackbar(t("The user account has been removed"), { variant: "success", }); setIsDeleting(false) } };

El siguiente código está en JSX donde se hace clic en el botón.

 //For opening Dialog <IconButton onClick={() => handleConfirmDelete()} color="primary"> <DeleteTwoToneIcon fontSize="small" /> </IconButton> //Dialog <DialogWrapper open={openConfirmDelete} > <ButtonError onClick={handleDeleteCompleted} size="large" sx={{ mx: 1, px: 3, }} variant="contained" startIcon={isDeleting ? <CircularProgress size="1rem" /> : null} disabled={isDeleting} > {t("Delete")} </ButtonError> </DialogWrapper>

Cuando hago clic en el botón Eliminar, el cuadro de diálogo se abre nuevamente con la barra de progreso, pero no muestra la barra de progreso en la primera ventana abierta.

¿Cómo evitar que este cuadro de diálogo se abra dos veces?