title: Detect click outside component react hooks
body: <p>I am trying to use react hooks to determine if a user has clicked outside an element. I am using <code>useRef</code> to get a reference to the element.</p>
  
  <p>Can anyone see how to fix this. I am getting the following errors and following <a href="https://stackoverflow.com/questions/32553158/detect-click-outside-react-component">answers from here</a>.</p>
  
  <blockquote>
    <p>Property 'contains' does not exist on type 'RefObject'</p>
  </blockquote>
  
  <p>This error above seems to be a typescript issue.</p>
  
  <p>There is a <a href="https://codesandbox.io/s/6xx7pvzp63" rel="noreferrer">code sandbox here</a> with a different error.</p>
  
  <p>In both cases it isn't working.</p>
  
  <pre class="lang-js prettyprint-override"><code>import React, { useState, useEffect, useRef } from 'react';
  import ReactDOM from 'react-dom';
  
  const Menu = () =&gt; {
      const wrapperRef = useRef&lt;HTMLDivElement&gt;(null);
      const [isVisible, setIsVisible] = useState(true);
  
      // below is the same as componentDidMount and componentDidUnmount
      useEffect(() =&gt; {
          document.addEventListener('click', handleClickOutside, true);
          return () =&gt; {
              document.removeEventListener('click', handleClickOutside, true);
          };
      }, []);
  
  
      const handleClickOutside = event =&gt; {
         const domNode = ReactDOM.findDOMNode(wrapperRef);
         // error is coming from below
         if (!domNode || !domNode.contains(event.target)) {
            setIsVisible(false);
         }
      }
  
      return(
         &lt;div ref={wrapperRef}&gt;
           &lt;p&gt;Menu&lt;/p&gt;
         &lt;/div&gt;
      )
  }
  </code></pre>