Событие щелчка оверлея не срабатывает на мобильном телефоне при использовании с TouchStart

Question

У меня есть оверлей, содержащий некоторые действия, из которых пользователь может выбрать. Наложение активируется / отображается при нажатии на простой текст. И это обескураживается, когда пользователь щелкает за пределами текста. Я использую addEventListener для обнаружения события клика.

Это прекрасно работает, КРОМЕ мобильного телефона, где есть проблема с частью увольнения. Наложение отменяется, только если я снова нажимаю на тот же элемент: нажмите, чтобы показать, нажмите, чтобы закрыть. Однако, что касается увольнения, я хочу, чтобы пользователь мог щелкнуть где угодно, чтобы его уволить.

Для этого я добавляю прослушиватель событий касания. Теперь я могу щелкнуть в любом месте, и наложение будет отклонено. Теперь проблема заключается в том, что оверлей отклоняется ПЕРЕД тем, как запускается действие, на которое нажал пользователь.

Теперь, если я использую только прослушиватель событий щелчка, активируется наложенное действие, но, как упоминалось выше, я не могу нигде коснуться / щелкнуть и отклонить наложение.

То, что я хотел бы, это одновременно иметь возможность отклонять оверлей, нажимая в любом месте экрана, и в то же время запускать действия, которые пользователь нажимает на оверлей.

Ниже приведена соответствующая часть кода:

...
{showPopOver &&
          <Overlay
            show={showPopOver}
            target={target}
            placement="bottom"
            container={node.current}
          >
            <CustomPopover
              type="viewProfile"
              name={getNameFromEmail(popOverName)}
            />
          </Overlay>
        } 
...

...
  useOnClickOutside(node, () => setShowPopOver(!showPopOver))

  function useOnClickOutside(reff, handler) {
    useEffect(() => {
      const listener = event => {
        event.preventDefault()
        if (reff.current || !reff.current?.contains(event.target)) {
          setShowPopOver(false)
          return
        }
      }

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

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

Любые предложения с благодарностью :) Спасибо заранее.