[Dúvida] Valor do span não é alterado

Boa tarde!

Estou realizando a validação de um campo de e-mail conforme a aula apresenta, porém o valor do span .mensagem-erro não se altera, apenas é impressa no console.

Meu codigo js:

const camposDoFormulario = document.querySelectorAll("[required]")

camposDoFormulario.forEach((campo) => {
    campo.addEventListener("blur", () => verificaCampo(campo));
    campo.addEventListener("invalid", evento => evento.preventDefault());
})



const tiposDeErro = [
    'valueMissing',
    'typeMismatch',
    'patternMismatch',
    'tooShort',
    'customError'
]

const mensagens = {
    nome: {
        valueMissing: "O campo de nome não pode estar vazio.",
        patternMismatch: "Por favor, preencha um nome válido.",
        tooShort: "Por favor, preencha um nome válido."
    },
    email: {
        valueMissing: "O campo de e-mail não pode estar vazio.",
        typeMismatch: "Por favor, preencha um email válido.",
        tooShort: "Por favor, preencha um e-mail válido."
    }
};

function verificaCampo(campo) {
    var mensagem;
    tiposDeErro.forEach(erro => {    
        if (campo.validity[erro]) {
            mensagem = mensagens[campo.name][erro];
            console.log(mensagem);

        }
    })

    const mensagemErro = campo.parentNode.querySelectorAll(".mensagem-erro");
    const validadorDeInput = campo.checkValidity() ;

    if(!validadorDeInput){
        mensagemErro.textContent = mensagem;

    }else{
        mensagemErro.textContent = "";
    }

}

Meu campo html:

                    <div class="text-field">
                        <label for="email">E-mail</label>
                        <input class="campo_escrita" id="email" type="email" name="email" placeholder="E-mail" minlength="4" required>
                        <span id="mensagem-erro" class="mensagem-erro"></span>
                    </div>

Ao imprimir o textcontent do campo, o resultado é undefined.

Alguém sabe o que pode estar atrapalhando?

att,