import React from "react"; interface OuterClickProps { contextClassName: string; setMenuVisible: React.Dispatch>; } export default function OuterClick({ contextClassName, setMenuVisible, }: OuterClickProps) { const handleClick = (event: MouseEvent) => { const targets = event.target as HTMLElement; // Check if the click is outside the selectable-dropdown-wrapper if (!targets.closest(`.${contextClassName}`)) { setMenuVisible(false); // Close the menu by updating the state } }; // Add event listener on mount and remove it on unmount React.useEffect(() => { document.addEventListener("click", handleClick); return () => { document.removeEventListener("click", handleClick); }; }, []); return null; // This component doesn't render anything }