text: Q:
  
  Remove event listener issue in react js
  
  const ControlPanel = ({ mainSectionRef }) => {
      const [canMove, setCanMove] = useState(false)
      const classes = useStyles();
      const toolbarRef = useRef();
  
      const onMouseMove = function (e) {
          const { x, y } = getMouseCoordinatesOnCanvas(e, mainSectionRef.current);
          toolbarRef.current.style.left = x +'px';
          toolbarRef.current.style.top = y + 'px';
      }
  
      const setCan = () => {
          setCanMove(!canMove)
      }
  
      if (mainSectionRef.current) {
          //issue is here!!!!
          mainSectionRef.current.removeEventListener('mousemove', onMouseMove, true)
          if (canMove) {
              mainSectionRef.current.addEventListener('mousemove', onMouseMove, true)
          }
      }
  
      return (
          <Toolbar ref={toolbarRef}>
             <RadioButtonUncheckedIcon />
             <CropSquareIcon />
             <ArrowRightAltIcon />
             <CloseIcon />
             <DragIndicatorIcon style={{ backgroundColor: canMove ? "red" : "inherit" }} onClick={setCan}/>
          </Toolbar >
      );
  }
  export default ControlPanel;
  
  I'm trying to remove the event listener whenever there is a state change in the component. mainSectionref is a parent div and the control panel is the child component. I'm trying to move the control panel in the mainSection onClick of a button. The event does get added but on state change, it doesn't seem to remove the event listener. Can I know what's going wrong?. 
  
  A:
  
  useEffect(() => {
      function onMouseMove(e) {
          //Some code
      }
      if (mainSectionRef.current) {
          **mainSectionRef.current.onmousemove = null**;
          if (canMove) {
              mainSectionRef.current.onmousemove = e => onMouseMove(e);
          }
      }
  }, [canMove])
  
  The issue is resolved by using the key onmousemove. I still don't know why removeEventListener is not working in the above case.
  
  