title: mouseleave event not firing in gatsby component
body: <p>I'm trying to create a drop down menu component and the mouseleave is not firing on the div. If i use <code>document.addEventListerner('click', handleEvent)</code> it fires just fine and works as expected but i need it to fire on mouseleave. The component is below.</p>
  <pre><code>const MenuDropDown: React.FC&lt;Props&gt; = ({ menuLinks, setFocus, focus, explore }) =&gt; {
  const ref = useRef&lt;HTMLDivElement&gt;(null);
  
  useEffect(() =&gt; {
      /**
       * Alert if hovered outside of element
       */
      function handleUserEvent(event: any) {
          console.log(ref.current);
          if (ref &amp;&amp; ref.current) {
              setFocus(false);
          }
      }
      // Bind the event listener
  
      ref.current?.addEventListener('mouseleave', handleUserEvent);
      return () =&gt; {
          ref.current?.removeEventListener('mouseleave', handleUserEvent);
      };
  }, [ref]);
  
  return (
      &lt;S.Wrapper explore={explore}&gt;
          &lt;S.Container id=&quot;container&quot; ref={ref}&gt;
              {menuLinks.length &gt; 0 &amp;&amp;
                  menuLinks.map((data, key) =&gt; {
                      const url = data.url;
                      const title = data.title;
                      return (
                          &lt;S.StyledLink key={key} activeStyle={{ background: 'rgb(245, 245, 244)' }} to={url}&gt;
                              {title}
                          &lt;/S.StyledLink&gt;
                      );
                  })}
          &lt;/S.Container&gt;
      &lt;/S.Wrapper&gt;
  );
  </code></pre>
  <p>};</p>
  <p>export default MenuDropDown;</p>