title: document.removeEventListener not fire in useEffect return
body: <p>I use  React  transitions group with Router
  When moving to another page it does not remove the listener
  It only removes the listener when moving and reloading</p>
  <pre><code>function IntroPage() {
  
   function Herotilt(event) {
       var Tilt = document.getElementById(&quot;showcase-tilt&quot;);
       var maxTilt = 1.5;
  
       var xPos = (event.pageX / window.screen.width) * (maxTilt * 2) - maxTilt;
       var yPos = (event.pageY / window.screen.height) * (maxTilt * 2) - maxTilt;
       gsap.set(Tilt, { transformPerspective: 2000, transformOrigin: &quot;center&quot; });
       gsap.to(Tilt, 0.2, {
        rotationY: xPos,
        rotationX: yPos,
        ease: Power1.easeOut,
        overwrite: true,
      });
    }
  
    useEffect(() =&gt; { // start useEffect Hook
  
      document.addEventListener(&quot;mousemove&quot;, (event) =&gt; { //Start EventListener
      Herotilt(event);
      console.log(&quot;from Intro&quot;);
     }); // end EventListener
  
      return function cleanUp() { //start Clean Function
       console.log(&quot;Clean UP&quot;);
       document.removeEventListener(&quot;mousemove&quot;, Herotilt);
        }; // end Clean Function 
  
     }, []); // end useEffect Hook
  
  } // end Function Component
  </code></pre>