useDetectClickOutside.js

/**
 * Register a callback to trigger when we detect a click outside of refs.
 */
export function useDetectClickOutside(refs, callback) {
    useEffect(() => {
        const handleMouseDown = (e) => {
            const clickOutsideOfRefs =
                refs.every((r) => r.current) &&
                refs.every((r) => !r.current.contains(e.target));

            if (clickOutsideOfRefs) {
                callback();
            }
        };

        document.addEventListener("mousedown", handleMouseDown);
        return () => document.removeEventListener("mousedown", handleMouseDown);
    }, []);
}