diff --git a/src/renderer/components/modal/modal.tsx b/src/renderer/components/modal/modal.tsx
index cc75db26..9b5f8cf5 100644
--- a/src/renderer/components/modal/modal.tsx
+++ b/src/renderer/components/modal/modal.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useId, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { XIcon } from "@primer/octicons-react";
 
@@ -24,9 +24,8 @@ export function Modal({
   const [isClosing, setIsClosing] = useState(false);
   const dispatch = useAppDispatch();
   const modalContentRef = useRef<HTMLDivElement | null>(null);
-  const componentId = useId();
 
-  const handleCloseClick = () => {
+  const handleCloseClick = useCallback(() => {
     setIsClosing(true);
     const zero = performance.now();
 
@@ -38,7 +37,7 @@ export function Modal({
         setIsClosing(false);
       }
     });
-  };
+  }, [onClose]);
 
   const isTopMostModal = () => {
     const openModals = document.querySelectorAll("[role=modal]");
@@ -57,7 +56,7 @@ export function Modal({
 
     window.addEventListener("keydown", onKeyDown);
     return () => window.removeEventListener("keydown", onKeyDown);
-  }, []);
+  }, [handleCloseClick]);
 
   useEffect(() => {
     const onMouseDown = (e: MouseEvent) => {
@@ -74,7 +73,7 @@ export function Modal({
 
     window.addEventListener("mousedown", onMouseDown);
     return () => window.removeEventListener("mousedown", onMouseDown);
-  }, []);
+  }, [handleCloseClick]);
 
   useEffect(() => {
     dispatch(toggleDragging(visible));