[Dúvida] Duvidas com a alteração de contexto.

Tem algo errado no meu codigo, que eu nao estou conseguindo corrigir.

Quando eu clico para alterar os contextos. Eu tenho que clicar duas vezes para atualizar o tempo correto em cada contexto. ex: Se eu estou no contexto foco e clico apenas uma unica vez no contexto descanso - curto. Ele me mostra o tempo do contexto foco (25:00 e nao 5:00), e se eu clico, novamente no contexto descanso- curto, ai sim, ele atualiza para 5:00. como fazer essa mudanca em apenas 1 clique ??

const html = document.querySelector('html');
const imgContexto = document.querySelector('.app__image');
const textoContexto = document.querySelector('.app__title');
const tempoNaTela = document.querySelector('#timer');
const imgIconePlayouPause = document.querySelector('.app__card-primary-butto-icon');
const musicaFocoInput = document.querySelector('#alternar-musica')


//audios

const musica = new Audio('/sons/luna-rise-part-one.mp3')
const audioPlay = new Audio('./sons/play.wav');
const audioPausa = new Audio('./sons/pause.mp3');
const audioTempoFinalizado = new Audio('./sons/beep.mp3')


// botoes

const btnFoco = document.querySelector('.app__card-button--foco');
const btnCurto = document.querySelector('.app__card-button--curto');
const btnLongo = document.querySelector('.app__card-button--longo');
const btnContexto = document.querySelectorAll('.app__card-button')
const btnStartOuPause = document.querySelector('#start-pause');
const btnTextoComecarouPausar = document.querySelector('#start-pause span');


let tempoDecorridoEmSegundos = 1500
let intervaloId = null

musica.loop = true

musicaFocoInput.addEventListener('change', () => {
    if(musica.paused) {
        musica.play()
    } else {
        musica.pause()
    }
})

btnFoco.addEventListener('click', () => {
    alterarContexto('foco')
    tempoDecorridoEmSegundos = 1500
    btnFoco.classList.add('active')
       
});

btnCurto.addEventListener('click', () => {
    alterarContexto('descanso-curto')
    tempoDecorridoEmSegundos = 300
    btnCurto.classList.add('active')
   
});

btnLongo.addEventListener('click', () => {
    alterarContexto('descanso-longo')
    tempoDecorridoEmSegundos = 600
    btnLongo.classList.add('active')

});

function alterarContexto (contexto) {
    mostrarTempo ()
    btnContexto.forEach(function (contexto) {
        contexto.classList.remove('active')
    })

html.setAttribute('data-contexto', contexto)
imgContexto.setAttribute('src', `./imagens/${contexto}.png`)
switch (contexto) {
    case 'foco': 
        textoContexto.innerHTML = ```
Otimize sua produtividade,<br>
        <strong class="app__title-strong">mergulhe no que importa.</strong>`
        break;

        case 'descanso-curto':textoContexto.innerHTML = `Que tal dar uma respirada?<br>
        <strong class="app__title-strong">Faça uma pausa curta!</strong>`
        break;

        case 'descanso-longo': textoContexto.innerHTML = `Hora de voltar à superfície.<br>
        <strong class="app__title-strong">Faça uma pausa longa.</strong>`
        break;

    default:
        break
```;
}
};


const contagemRegressiva = () => {
    if(tempoDecorridoEmSegundos <=0 ){
         zerar()
       audioTempoFinalizado.play()
        alert ('Tempo Finalizado')
        return
    }
    tempoDecorridoEmSegundos  -=1
    mostrarTempo ()
 
    
};

function iniciarOuPausar () {
    if(intervaloId) { // isso aqui é para pausar e continuar. 
        audioPausa.play ()  
        imgIconePlayouPause.setAttribute('src', '/imagens/play_arrow.png')
        zerar()
        return
    }
    intervaloId = setInterval(contagemRegressiva, 1000)
    audioPlay.play()
    imgIconePlayouPause.setAttribute('src', '/imagens/pause.png')
    btnTextoComecarouPausar.textContent = "Pausar"

};

function zerar() {
    clearInterval(intervaloId) //para a contagem do intervaloid.
    intervaloId = null // garante que só inicia quando apertar o botao.
    btnTextoComecarouPausar.textContent = "Começar"
  
};

btnStartOuPause.addEventListener('click',iniciarOuPausar);

function mostrarTempo () {
    const tempo = new Date (tempoDecorridoEmSegundos * 1000)
    const tempoFormatado = tempo.toLocaleTimeString('pt-br', {minute: '2-digit', second: '2-digit'})
    tempoNaTela.innerHTML = `${tempoFormatado}`

};

mostrarTempo ()