Вы определяете функцию clickOutsideHandler как useState, вам следует просто сделать ее реальной функцией, поскольку она не использует никакой логики состояния.

Я бы изменил это на что-то вроде этого (без ts)

const clickOutsideHandler = (evt) => {
    if (!isOpen || popoverRef.current.contains(evt.target)) { return; }   // Clicked on one of the own children
    close();
};

Тем не менее, вместо создания функций open и close вы можете использовать функцию стрелки в обработчике setState, чтобы получить текущее значение, а затем переключить его, например:

const toggleOpenState = () => setIsOpen(cur => !cur);

Проблема

Это проблема Javascript Закрытие.

Вы определяете функцию, которая закрывается по значению состояния isOpen из начального цикла рендеринга при объявлении состояния clickOutsideHandler.

const [isOpen, setIsOpen] = useState(false);

const [clickOutsideHandler] = useState(() =>
  (evt: MouseEvent): void => {
    console.info('!isOpen: ' + isOpen);
    if (!isOpen || popoverRef.current.contains(evt.target as Node)) {
      return;
    } // Clicked on one of the own children
        
    close();
  }
);

Состояние clickOutsideHandler никогда не обновляется для повторного включения текущего значения состояния isOpen, поэтому оно всегда имеет начальное значение состояния false isOpen.

Первоначальное решение

Вместо использования состояния React для хранения обратного вызова чаще используется хук useCallback (т. е. useState + useEffect для обновления обратного вызова -> useCallback) с соответствующими зависимостями для правильного закрытия значений и предоставления стабильной ссылки на обратный вызов.

Пример:

Обратите внимание, что clickOutsideHandler также необходимо включить в зависимости useEffect-хука, чтобы эффект был правильно настроен.

const [isOpen, setIsOpen] = useState(false);

const clickOutsideHandler = useCallback(
  (evt: MouseEvent): void => {
    if (!isOpen || popoverRef.current.contains(evt.target as Node)) {
      return;
    } // Clicked on one of the own children
        
    close();
  },
  [isOpen]
);

useEffect(() => {
  if (isOpen) {
    window.requestAnimationFrame(() => {
      document.addEventListener('click', clickOutsideHandler);
    });
  } else {
    document.removeEventListener('click', clickOutsideHandler);
  }
}, [clickOutsideHandler, isOpen]);

Фактическое решение

Приведенное выше решение не удаляет ранее добавленные прослушиватели событий. Эффект должен возвращать функцию очистки для правильного удаления ранее добавленных прослушивателей событий. Переместите объявление clickOutsideHandler в обратный вызов useEffect, чтобы оно стало внутренней ссылкой для функции очистки.

Добавляйте прослушиватель событий только тогда, когда isOpen правдиво, и удаляйте прослушиватель только в функции очистки.

Вы также можете удалить проверку isOpenclickOutsideHandler, поскольку ее можно вызвать только в том случае, если isOpen было истинно и был добавлен прослушиватель событий.

const [isOpen, setIsOpen] = useState(false);

useEffect(() => {
  const clickOutsideHandler = (evt: MouseEvent): void => {
    if (popoverRef.current.contains(evt.target as Node)) {
      return;
    } // Clicked on one of the own children
        
    close();
  };

  if (isOpen) {
    window.requestAnimationFrame(() => {
      document.addEventListener('click', clickOutsideHandler);
    });
  }

  return () => {
    document.removeEventListener('click', clickOutsideHandler);
  };
}, [isOpen]);