Javascript clearTimeout function doesnt work

Question

I created an interactive banner and need to monitor some user behavior. The first interactivity is that when the user clicks on the banner it expands and if there is no more interactivity it contracts again. When the banner expands, a dropdown opens with multiple choices and each one plays a different video.

When the banner expands, I start a function to find out if there is any more user interaction with the banner, and if the mouse is moving or using the keyboard. If there is no interactivity the banner is collapsed.

But if the user clicks on one of the dropdown options, I call a function to stop the setTimeout and create a listener to monitor when the video ends and then I call the first function again to reset the banner.

But the function for the stops timeout (stopTimer) is not working, here is the code.

Initializing the variables

  var timeoutInMiliseconds = 10000
  var timeoutId

Listener to expand the banner and open the dropdown and starts setupTimers function

dropbtn.addEventListener('click', function(e) {
    if(running) {
      inner();
      bannerSize();
      running = false
    }
    elem3.classList.add('is-active')
    drop.classList.add('is-active')
    seta.classList.add('is-active')
    
    console.log('timer start')
    setupTimers()
  })

Listener to monitor dropdown options clicks As you can see, I call stopTimer function to stop the setupTimers function and create another listener to monitor when the video ends

click1.addEventListener('click', function(e){
    console.log('stop timer')
    stopTimer()

    bg()
    contentVideo.classList.add('show')
    source.setAttribute('src', './diesel-r.mp4')
    source.setAttribute('type', 'video/mp4')
    video.appendChild(source)
    video.play()
    video.muted = true
    btn.addEventListener('click', function(e) {
      window.open('https://www.youtube.com/embed/ojaR_wiAkIM')
    })

    video.addEventListener('ended', function() {
      console.log('start timer after video ended')
      setupTimers()
    })
  })

Functions responsible for starting the setTimeout, stopping, resetting, and closing the banner and other elements

function stopTimer() {
  window.clearTimeout(timeoutId)
}

function resetTimer() {
  window.clearTimeout(timeoutId)
  startTimer();
}

function startTimer() {
  timeoutId = window.setTimeout(doInactive, timeoutInMiliseconds)
}

function doInactive() {
  console.log('reseted')
  running = true
  reset()
  bgReset()
  elem3.classList.remove('is-active')
  drop.classList.remove('is-active')
  seta.classList.remove('is-active')
  seta.classList.remove('anima-seta')

  for (var i = 0; i < dropdownContent.length; i++) {
    dropdownContent[i].classList.remove('show')
  }
  contentVideo.classList.remove('show')
  video.pause()
  video.currentTime = 0
  video.removeAttribute('src')
  video.load()
}

function setupTimers() {
  document.addEventListener("mousemove", resetTimer, false)
  document.addEventListener("mousedown", resetTimer, false)
  document.addEventListener("keypress", resetTimer, false)
  document.addEventListener("touchmove", resetTimer, false)

  startTimer()
}