import React from "react"; interface OuterClickProps { contextClassName: string[]; // Make sure this is an array of strings 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 of any of the provided class names const isOutside = contextClassName.every( (className) => !targets.closest(`.${className}`) ); if (isOutside) { 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); }; }, [contextClassName]); // Add contextClassName to dependency array to handle any changes return null; // This component doesn't render anything }