click outside of button/dropdowqn as hook

src/components/SelectLichessStudy.tsx

@@ -1,4 +1,5 @@
-import { useEffect, useRef, useState } from "react";
+import { useRef, useState } from "react";
+import { useClickOutside } from "#/hooks/useClickOutside.ts";
 import { type IUserStudyChapter, useLichess } from "#/hooks/useLichess.ts";
 
 interface IProps {
@@ -30,24 +31,7 @@ const SelectLichessStudy = ({ setSelectedStudyId }: IProps) => {
 		setSearch("");
 	};
 
-	useEffect(() => {
-		const handleClickOutside = (event: MouseEvent) => {
-			if (
-				isOpen &&
-				dropdownRef.current &&
-				!dropdownRef.current.contains(event.target as Node)
-			) {
-				setIsOpen(false);
-				setSearch("");
-			}
-		};
-
-		document.addEventListener("mousedown", handleClickOutside);
-
-		return () => {
-			document.removeEventListener("mousedown", handleClickOutside);
-		};
-	}, [isOpen]);
+	useClickOutside({ isOpen, setIsOpen, setSearch, ref: dropdownRef });
 
 	return (
 		<div ref={dropdownRef} className="relative">
@@ -74,6 +58,7 @@ const SelectLichessStudy = ({ setSelectedStudyId }: IProps) => {
 								strokeLinecap="round"
 								strokeLinejoin="round"
 							>
+								<title>search</title>
 								<circle cx="11" cy="11" r="8" />
 								<path d="m21 21-4.3-4.3" />
 							</svg>