I can’t run the slider function in react

I am trying to make a simple component. The component can also be dragged. When I run it I don’t get any error but it doesn’t work.When I make some changes, it gives the error “TypeError: slider.addEventListener is not a function”. How can I make these codes work?

export class SliderComp extends Component {
  render() {
     function SliderComp( ) {
    let slider = document.querySelectorAll("items");
     let isDown = false;
    let startX;
    let scrollLeft;

    slider.addEventListener("mousedown", (e) => {
      isDown = true;
      slider.classList.add("active");
      startX = e.pageX - slider.offsetLeft;
      scrollLeft = slider.scrollLeft;
    });
    slider.addEventListener("mouseleave", () => {
      isDown = false;
      slider.classList.remove("active");
    });
    slider.addEventListener("mouseup", () => {
      isDown = false;
      slider.classList.remove("active");
    });
    slider.addEventListener("mousemove", (e) => {
      if (!isDown) return;
      e.preventDefault();
      const x = e.pageX - slider.offsetLeft;
      const walk = (x - startX) * 3;
      slider.scrollLeft = scrollLeft - walk;  
    });
  }
    return (
      <div>        
        <div class="grid-container">
          <main class="grid-item main">
            <div class="items">
              <div class="item item1"></div>
              <div class="item item2"></div>
            </div>
          </main>
        </div>
      </div>
    );   
  }
}