title: React Modal and Tooltip issue when using Portal
body: <p>I have a simple Modal component and a simple Tooltip component. Both of them can be opened by clicking on the triggering button and dismissed by clicking outside. To detect clicking outside, I use this simple hook:</p>
  <pre><code>const useClickAway = (
    ref: Ref,
    condition: boolean,
    handler: Handler
  ): void =&gt; {
  
    useEffect(() =&gt; {
      const listener = (e: Event) =&gt; {
        if (!ref.current || ref.current.contains(e.target as Node)) {
          return;
        }
        handler(e);
      };
      if (condition) {
        document.addEventListener('mouseup', listener);
        document.addEventListener('touchend', listener);
      }
      return () =&gt; {
          document.removeEventListener('mouseup', listener);
          document.removeEventListener('touchend', listener);
      };
    }, [ref, handler, condition]);
  };
  </code></pre>
  <p>And this is how I use it:</p>
  <pre><code>/*
  * ref - reference to the modal container
  * isOpen - The modal state.
  * handleClose - Handler that closes the modal.
  */
  useClickAway(ref, isOpen, handleClose)
  
  </code></pre>
  <p>It has been working fine so far, but the issue appeared when I try to render my tooltip (which uses Portal to render it into the body element, instead of the react tree) inside this Modal.</p>
  <p>When I open the modal and then open the tooltip inside it, clicking on the tooltip is causing the modal to close. Because clicking on the tooltip is considered as clicking outside for the Modal.</p>
  <p>Can anyone provide clean solution to this problem?</p>