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

src/components/TimerEndedModal.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 {
@@ -7,10 +7,53 @@ interface Props {
 	onClose: () => void;
 }
 
-export default function TimerEndedModal({isOpen, onClose}: Props) {
+export default function TimerEndedModal({ isOpen, onClose }: 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(() => {
+		if (isClosing) return;
+
+		setIsClosing(true);
+		onClose();
+
+		const timer = setTimeout(() => {
+			setIsClosing(false);
+		}, 300);
+
+		return () => clearTimeout(timer);
+	}, [isClosing, onClose]);
+
+	if (!mounted && !isOpen) return null;
+
 	return (
-		<Transition show={isOpen} as={Fragment}>
-			<Dialog onClose={onClose} className="relative z-50">
+		<Transition
+			show={isOpen}
+			as={Fragment}
+			beforeEnter={() => setIsClosing(false)}
+			beforeLeave={() => setIsClosing(true)}
+			afterLeave={() => {
+				setIsClosing(false);
+				setMounted(false);
+			}}
+		>
+			<Dialog onClose={()=> blockMultipleClicksClose()} className="relative z-50">
 				<Transition.Child
 					as={Fragment}
 					enter="ease-out duration-300"
@@ -37,7 +80,7 @@ export default function TimerEndedModal({isOpen, onClose}: Props) {
 								The timer has ended! Your answers have been registered and saved, you will now move on to the next module (or to the
 								finish screen, if this was the last one).
 							</span>
-							<Button color="purple" onClick={onClose} className="max-w-[200px] self-end w-full mt-8">
+							<Button color="purple" onClick={()=> blockMultipleClicksClose()} className="max-w-[200px] self-end w-full mt-8">
 								Continue
 							</Button>
 						</Dialog.Panel>