More modal patches and a bug in level that I'm still trying to solve

src/components/AbandonPopup.tsx

@@ -1,5 +1,5 @@
-import {Dialog, Transition} from "@headlessui/react";
-import {Fragment} from "react";
+import { Dialog, Transition } from "@headlessui/react";
+import { Fragment, useCallback, useEffect, useState } from "react";
 import Button from "./Low/Button";
 
 interface Props {
@@ -11,10 +11,54 @@ interface Props {
 	onCancel: () => void;
 }
 
-export default function AbandonPopup({isOpen, abandonPopupTitle, abandonPopupDescription, abandonConfirmButtonText, onAbandon, onCancel}: Props) {
+export default function AbandonPopup({ isOpen, abandonPopupTitle, abandonPopupDescription, abandonConfirmButtonText, onAbandon, onCancel }: Props) {
+	const [isClosing, setIsClosing] = useState(false);
+	const [mounted, setMounted] = useState(false);
+
+	useEffect(() => {
+		if (isOpen) {
+			setMounted(true);
+		}
+	}, [isOpen]);
+
+	useEffect(() => {
+		if (!isOpen && mounted) {
+			const timer = setTimeout(() => {
+				setMounted(false);
+				setIsClosing(false);
+			}, 300);
+			return () => clearTimeout(timer);
+		}
+	}, [isOpen, mounted]);
+
+	const blockMultipleClicksClose = useCallback((cancel: boolean) => {
+		if (isClosing) return;
+
+		setIsClosing(true);
+		const func = cancel ? onCancel : onAbandon;
+		func();
+
+		const timer = setTimeout(() => {
+			setIsClosing(false);
+		}, 300);
+
+		return () => clearTimeout(timer);
+	}, [isClosing, onCancel, onAbandon]);
+
+	if (!mounted && !isOpen) return null;
+
 	return (
-		<Transition show={isOpen} as={Fragment}>
-			<Dialog onClose={onCancel} className="relative z-50">
+		<Transition
+			show={isOpen}
+			as={Fragment}
+			beforeEnter={() => setIsClosing(false)}
+			beforeLeave={() => setIsClosing(true)}
+			afterLeave={() => {
+				setIsClosing(false);
+				setMounted(false);
+			}}
+		>
+			<Dialog onClose={() => blockMultipleClicksClose(true)} className="relative z-50">
 				<Transition.Child
 					as={Fragment}
 					enter="ease-out duration-300"
@@ -39,10 +83,10 @@ export default function AbandonPopup({isOpen, abandonPopupTitle, abandonPopupDes
 							<Dialog.Title className="font-bold text-xl">{abandonPopupTitle}</Dialog.Title>
 							<span>{abandonPopupDescription}</span>
 							<div className="w-full flex justify-between mt-8">
-								<Button color="purple" onClick={onCancel} variant="outline" className="max-w-[200px] self-end w-full">
+								<Button color="purple" onClick={() => blockMultipleClicksClose(true)} variant="outline" className="max-w-[200px] self-end w-full">
 									Cancel
 								</Button>
-								<Button color="purple" onClick={onAbandon} className="max-w-[200px] self-end w-full">
+								<Button color="purple" onClick={() => blockMultipleClicksClose(false)} className="max-w-[200px] self-end w-full">
 									{abandonConfirmButtonText}
 								</Button>
 							</div>