The MDN specification of the closest method reads that the method traverses the DOM upwards, in the direction to the document root. But what method does one need to use in my case instead of closest then?

In my HTML page I have the following code:

<div class="slider__steps">
  <span></span>
  <span></span>
  <span class="slider__step-active"></span>
  <span></span>
  <span></span>
</div>

In my JS file I want to capture the closest span element to a mouse click and change its CSS class. I try to do this as follows:

moveSlider(elem) {
    let sliderSteps = elem.querySelector('.slider__steps');
    let spans = sliderSteps.querySelectorAll('span');
    elem.addEventListener('click', moveThumb);
    function moveThumb(event) {
      for (let span of spans) {
        span.classList.remove('slider__step-active');
      }
      event.target.closest('span').classList.add('slider__step-active');
    }
  }

But the error I get is

Uncaught TypeError: event.target.closest(...) is null

How does one actually catch these spans on mouse clicks?