Как обновить реагировать на изменение дочерних элементов ref.current?

Question

Я использую ссылки React для обработки кликов за пределами элемента.

import { useEffect } from 'react';

export const useClickOutside = (ref, callback = () => {}) => {
  const handleClick = e => {
    if (ref.current && !ref.current.contains(e.target)) {
      callback();
    }
  };

  useEffect(() => {
    document.addEventListener('click', handleClick);
    return () => {
      document.removeEventListener('click', handleClick);
    };
  }, []);
};

Проблема в том, что иногда ref.current.contains(e.target) возвращает false, в то время как e.target является фактическим дочерним элементом ref.current.

Я думаю, это происходит потому, что дочерние элементы ref. текущее изменение и ref.current не обновляются правильно.

Я сделал небольшой гиф проблемы: Imgur