Why am I receving this error? “Cannot read properties of null (reading ‘classList’)”

I’m receiving the error that classList is null on my sliderNav element. I’ve tried setting className and classList.add() and nothing is working. Please help.

const sliderNavDiv = document.createElement('div');
sliderNavDiv.classList.add('slider-nav-div');

for (let j = 0; j < 5; j++){
  const sliderNav = document.createElement('div');
  sliderNav.className = j === 0 ? 'slider-nav active' : 'slider-nav';
  sliderNav.id = j;
  sliderNavDiv.appendChild(sliderNav);

  sliderNav.addEventListener('click', (event) => {
    const id = event.target.id;
    const currentActive = document.querySelector('div.active');

    if (event.target !== currentActive) {
      currentActive.classList.toggle('active');

    if (id > currentActive.id) {
      event.target.classList.toggle('active');
      imageDiv.style.transform = `translateX(-420px)`;
    } else if (currentActive.id > id) {
      event.target.classList.toggle('active');
      imageDiv.style.transform = 'translateX('+`${(currentActive.id - id) * 420}`+'p';
    }   
    
  }
})};

I’m using this in the exact same way elsewhere in my code:

const animateDisplay = () => {
  const currentActiveImg = document.querySelector('img.active');
  currentActiveImg.classList.toggle('active');
  if (currentActiveImg.id != 4) {
    imageDiv.style.transform = 'translateX(-420px)';
    imageDiv.removeChild(currentActiveImg)

    currentActiveImg.nextElementSibling.classList.toggle('active');
    
  } else {
    imageDiv.style.transform = 'translateX(1680px)';
    currentActiveImg.firstElementChild.classList.toggle('active');
  }
};

WHY IS THIS HAPPENING 🙁