TEMPO NÃO REINICIA A PARTIR DE 10, MAS DE 0 E CONTA -1

Tentei entender a lógica do problema, mas não entendo o porquê que, quando eu clico em reiniciar jogo, a contagem do tempo volta a 10, mas quando clico no campo, não começa a descrescer a partir de 10, mas sim de 0. É como se na variável tempoDigitar não tivesse atualizado para o valor de #tempoContador, mas sim como se tivesse salvado o valor final anterior, que é 0 e conta a partir dele:

HTML `

<h1>TYPE TEST</h1>

<p class="frase">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos ab expedita, iure, temporibus eveniet
    dolorum minima aliquam soluta itaque doloribus id amet asperiores officia inventore necessitatibus? Laborum
    obcaecati fugiat praesentium?</p>

<ul class="infos">
    <li><span id="tamanhoDaFrase"></span> Palavras</li>
    <li><span id="tempoContador">10</span> Segundos</li>
</ul>

<textarea name="campoDigitacao" id="campoDigitacao" cols="40" rows="8"></textarea><br>
<button id="reiniciarJogo">Reiniciar jogo</button>

<ul>
    <li><span id="contadorCaracteres">0</span> caracteres</li>
    <li><span id="contadorPalavras">0</span> palavras</li>
</ul>

<script src="./js/jquery.js"></script>
<script src="./js/main.js"></script>

JavaScript

//const frase = jQuery(".frase"); //A função jQuery funciona como o document.querySelector e tem por atalho o $;
const tempoInicial = $("#tempoContador").text();
const frase = $(".frase").text(); //Função text() manipula o texto do elemento do DOM;
const numPalavras = frase.split(" ").length; //o .split separa as palavras em array de strings. O .lenght mostra quantos elementos tem no array;
let tempoDigitar = $("#tempoContador").text();
$("#tamanhoDaFrase").text(numPalavras);

//Se o parâmetro tem algo, ele insere no DOM. Se for vazio, recolhe do DOM;

const campoDigitar = $("#campoDigitacao");

$(document).ready(() => {
    iniciaCronometro();
    contaLetra();
    $("#reiniciarJogo").click(reiniciaJogo);
});



function contaLetra() {
    campoDigitar.on("input", function () { //O "on" no jQuery equivale ao criador de eventos addEventListener
        const conteudo = campoDigitar.val() //.val é a abreviação do jQuery para .value dentro de um input e value != text
        const qtePalavras = conteudo.split(/\S+/).length - 1; //\S+ é melhor que " ", pois não conta espaço como palavra
        const qteCaracteres = conteudo.length;

        $("#contadorPalavras").text(qtePalavras); //Podemos, em alguns casos, usar o $ (ou jQuery) isolado de associar com uma variável;
        $("#contadorCaracteres").text(qteCaracteres);


    });
}



function iniciaCronometro() {
    campoDigitar.one("focus", function () { //O evento focus indica quando um elemento esta "cursado", pelo ponteiro ou não
        let intervalo = setInterval(function () { //Define que uma função será executada em determinado tempo
            tempoDigitar--; //tempoDigitar-- == tempoDigitar = tempoDigitar-1
            $("#tempoContador").text(tempoDigitar);

            if (tempoDigitar < 1) {
                campoDigitar.attr("Disabled", true); //O método attr do jQuery adiciona um atributo à tag, o segundo parâmetro é seu valor
                clearInterval(intervalo); //Zera o funcionamento do setInterval;
            }


        }, 1000); //Aqui é definido o tempo de execução do setInterval em milisegundos

    }); //A função do jQuery on. escuta o evento indefinitivamente. A one. escuta uma única vez
}

function reiniciaJogo() {
    console.log("Botão clicado");
    campoDigitar.attr("Disabled", false);
    campoDigitar.val(" ");
    $("#contadorPalavras").text("0");
    $("#contadorCaracteres").text("0");
    $("#tempoContador").text(tempoInicial);
    iniciaCronometro();
}