diff --git a/lib/hooks/useOnClickOut.ts b/lib/hooks/useOnClickOut.ts
index 5d2fd7a..6ae13a4 100644
--- a/lib/hooks/useOnClickOut.ts
+++ b/lib/hooks/useOnClickOut.ts
@@ -1,18 +1,21 @@
-import {useEffect, useRef} from "react";
+import { useEffect, useLayoutEffect, useRef } from "react";
 
-export default function useOnClickOutside(
-  handler: (e: any) => void
-) {
-  const ref = useRef<HTMLDivElement>(null)
+export default function useOnClickOutside(handler: (e: any) => void) {
+  const ref = useRef<HTMLDivElement>(null);
+  const handRef = useRef(handler);
+  useLayoutEffect(() => {
+    handRef.current = handler;
+  }, [handler]);
   useEffect(() => {
     const handleClickOutside = (e: any) => {
+      console.info("handleClick:", !ref.current, ref.current === e.target, ref.current.contains(e.target));
       if (!ref.current || ref.current === e.target || ref.current.contains(e.target)) return;
-      if (handler) handler(e)
-    }
-    document?.addEventListener('click', handleClickOutside)
+      if (handRef.current) handRef.current(e);
+    };
+    document?.addEventListener("click", handleClickOutside);
     return () => {
-      document?.removeEventListener('click', handleClickOutside)
-    }
-  }, [ref.current])
-  return ref
+      document?.removeEventListener("click", handleClickOutside);
+    };
+  }, [ref.current]);
+  return ref;
 }