I have problem with DialogWrapper where is open two times when i clicked on Delete button in Dialog.

There are two events, on first event Dialog is open and when clicked on delete button, it should show progress spinner in button. Once action is finished, dialog is closed.

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)
    }
};

Below code is in JSX where button is clicked.

//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>

When I click on the delete button, dialog opens again with Progress bar, but it does not show the progress bar in the first open window.

How to prevent this dialog from opening two times?