React useOnClickOutside hook

onClickOutside.ts

import { MutableRefObject, useEffect } from 'react'

export const useOnClickOutside = (refs: MutableRefObject<any>[], handler: () => void) => {
    useEffect(() => {
        const listener = (event: any) => {
            const someElContainsTarget = refs.some((ref) =>
                ref.current?.contains(event.target),
            )
            if (!someElContainsTarget) handler()
        }

        document.addEventListener('mousedown', listener)
        document.addEventListener('touchstart', listener)

        return () => {
            document.removeEventListener('mousedown', listener)
            document.removeEventListener('touchstart', listener)
        }
    }, [...refs, handler])
}