New set of listeners created on each click, not removed on leave

[emilecollin]

I have this React component:

import React from 'react';
import { animateScroll as scroll } from 'react-scroll';

const Test: React.FC = () => {
  const scrollToTop = () => {
    scroll.scrollToTop();
  };

  return <div onClick={scrollToTop}>Test</div>;
};

export default Test;

On each click, a new set of keydown, mousedown, mousewheel and touchmove are created. Here we have it on Chrome Devtools after four clicks:

They are not removed on leave.

Not sure whats the usual procedure to remove them, but probably they should be cleaned for each click.