Отслеживание нажатия вне компонента — многократный вызов функции для схожих компонентов (React)

В таблице при нажатии на кнопку (которая есть в каждом столбце) отрисовывается выпадающий список. Необходимо при нажатии вне списка закрыть его.

Реализовываю это через соответствующий хук (взял первый попавшийся под руку готовый из сети):

// хук для отслеживания клика вне компонента
export const useOutsideClick = (callback: () => void) => {
    const ref = useRef<HTMLDivElement>(null);
  
    useEffect(() => {
        const handleClickOutside = (event: MouseEvent | TouchEvent) => {
            if (ref.current && !ref.current.contains(event.target as Node)) {
                callback();
            }
        };
  
        document.addEventListener('mouseup', handleClickOutside);
        document.addEventListener('touchend', handleClickOutside);
  
        return () => {
            document.removeEventListener('mouseup', handleClickOutside);
            document.removeEventListener('touchend', handleClickOutside);
        };
    }, [callback]);
  
    return ref;
};

И добавил его использование к выпадающему списку:

import { Menu, Popover } from "antd"

import { useOutsideClick } from "utils/hooks"

// компонент "выпадающий список"
const PopupActionsMenu = (props: IProps_PopupActionsMenu) => {
    const modalRef = useOutsideClick(() => {
        console.log('out');
    });

    // отрисовать компонент 
    return (
        <div ref={modalRef}>
            <Popover ...>
                <Button ... />
            </Popover>
        </div>
        
    );
}

Сам компонент PopupActionsMenu отрисовывается в каждой ячейке таблицы (Ant Design).

В результате когда открывается выпадающий список (при нажатии на кнопку), то в консоль выводится с десяток сообщений 'out'.

Если сделать внутри хука

console.log(ref.current);

то понятно (браузер подсвечивает), что срабатывают все компоненты PopupActionsMenu из таблицы.

ВОПРОС:

Подскажите, в чём может быть причина такого поведения? Как можно её исправить?