How to prevent dialog from disappearing? Reactjs

In this code I am displaying popup that have buttons, when button responsible for cancelation is clicked confirmation dialog shows up. I want the popup to disappear when clicked outside of it so I handle it like so:
const popupRef = useRef(null);

const handleClickOutside = (event: MouseEvent) => {
if (
popupRef.current &&
!popupRef.current.contains(event.target as Node)
) {
onClose();
}
};

useEffect(() => {
document.addEventListener('mousedown', handleClickOutside);

return () => {
document.removeEventListener('mousedown', handleClickOutside);
};
}, []);



onClose is callback that closes the popup. Now when button is clicked I create the dialog like so:
{showCancelConfirmationDialog &&
}

const handleCloseDialog = () => {
console.log("closing");
setShowCancelConfirmationDialog(false);
}

const handleCancelReservation = () => {
console.log("block")
block.isReserved = false;
block.reservedBy = "notMe";
onClose();
}



Dialog code:
interface DeleteConfirmationDialogProps {
onCancel: () => void;
onConfirm: () => void;
name: string;
}

const DeleteConfirmationDialog: React.FC = ({ onCancel, onConfirm, name }) => {
return (



Te jazdy są zarezerwowane przez: {name}


Czy na pewno chcesz je przesunąć i powiadomić o tym kursanta?
Usuń i powiadom
Anuluj

);
}

export default DeleteConfirmationDialog;



And now the problem is that wherever I click everything disappears because useEffect and handleClickOutside is triggered no matter what and I have no idea what it is happening. If I comment out this code it works fine. I tried adding another popupRef for the dialog but it didn't work. I also tried to control it via boolean when dialog is active but it also does not work.