Error when executing function and progress bar

Question

I am trying to make a circular progress bar, in which pressing it for 2 seconds executes a function that cancels everything. However, if I press the space bar for less than 2 seconds it still executes the function and does not show the progress bar again. What am I doing wrong? Sorry, I am not an expert programmer.

const resName = GetParentResourceName();

$(function() {
    let isSpaceKeyPressed = false;
    let progressIntervalId;
    let isProgressBarRunning = false;
    let progressStartedAt;
    let isTimeLimitReached = false; 

    function display(bool) {
        if (bool) {
          $("#root").show();
          return;
        }
        $("#root").hide();
    }

    function displayProgressBar() {
        if (!isProgressBarRunning) {
          isProgressBarRunning = true;
          progressStartedAt = Date.now();
          var progress = document.getElementById('progress-bar');
          var bar = new ProgressBar.Circle(progress, {
            color: "#b95000",
            strokeWidth: 4,
            trailWidth: 1,
            trailColor: '#eee',
            easing: 'easeInOut',
            duration: 2000,
            text: {
              autoStyleContainer: false
            },
            from: { color: "#b95000", width: 1 },
            to: { color: "#b95000", width: 4 },
            step: function(state, circle) {
              circle.path.setAttribute('stroke', state.color);
              circle.path.setAttribute('stroke-width', state.width);
      
              var value = Math.round(circle.value() * 100);
              if (value === 0) {
                circle.setText('');
              } else {
                circle.setText('');
              }
            }
          });
      
          bar.animate(1, function() {
            isProgressBarRunning = false;
            stopProgress();
            const elapsedTime = (Date.now() - progressStartedAt) / 1000;
            if (elapsedTime >= 2 && !isTimeLimitReached) {
              isTimeLimitReached = true;
              fetch(`https://${GetParentResourceName()}/stopCinematic`, {
                method: 'POST',
                headers: {
                  'Content-Type': 'application/json; charset=UTF-8',
                },
                body: JSON.stringify({
                  itemId: 'stopCinematic'
                })
              }).then(resp => resp.json()).then(resp => console.log("Stopping Cinematic"));
            }
          });
        }
      }
       
    function stopProgress() {
        clearInterval(progressIntervalId);
        document.getElementById('progress-bar').style.width = "0%";
        isProgressBarRunning = false;
        isTimeLimitReached = false; 
    }
    display(false);

function removeTextDiv(sceneId, animOut) {
    const textDiv = document.getElementById(`${divIdPrefix}${sceneId}`);
    if (textDiv) {
        textDiv.className = animOut
        setTimeout(() => textDiv.remove(), 1000);
    }
}

const divIdPrefix = 'text-';

window.addEventListener('message', function(event) {
    if (event.data.type === "display") return display(event.data.status);
    
    if (event.data.type === 'setTextData') {
        const sceneId = event.data.sceneId;
        const textContent = event.data.text;
        animOut = event.data.animOut;
        let textDiv = document.getElementById(`${divIdPrefix}${sceneId}`);
        if (!textDiv) {
            textDiv = document.createElement('div');
            textDiv.setAttribute('id', `${divIdPrefix}${sceneId}`);
            document.getElementById('root').appendChild(textDiv);
        }
        textDiv.innerHTML = textContent;
        textDiv.className = event.data.animIn;
    }
    
    if (event.data.type === 'clearText') {
        const sceneId = event.data.sceneId;
        removeTextDiv(sceneId, animOut);
    }    
});
    
    window.addEventListener('cerrarnui', function(event) {
        display(false);
      });
      

document.addEventListener('keydown', function(data) {
    if (data.key === " ") {
      isSpaceKeyPressed = true;
      displayProgressBar();
      setTimeout(() => { 
        isTimeLimitReached = true;
      }, 2000);
    }
});    
    document.onkeyup = data => {
        if (data.key === " ") {
            if (isSpaceKeyPressed && isProgressBarRunning) {
                stopProgress();
            }
            isSpaceKeyPressed = false;
            isTimeLimitReached = false; 
        }
    };
    
});

I have tried modifying the code several times, adding a timer but it doesn't seem to work.