[Bug] app.js:86 Uncaught TypeError: Cannot set properties of null (setting 'textContent') at verificaCampo (app.js:86:34) at HTMLInputElement.<anonymous> (app.js:18:41)

Olá bom dia estou fazendo passo a passo com a tutora, mas adaptando um pouco, mas me deparo com esse tipo de erro falando que não consegue definir propriedades para algo vazio, tentei refatorar colocando InnerHTML ou InnerText, mas não deu certo, teintei redefinir "mensagem" fora da função, não deu certo, fiz novamente, mas desta vez utilizando o repositorio da professora e por algum motivo somente o dela deu certo, queria saber se existe alguma maneira de concertar o meu codigo ao invez de ter que substinur ? segue meu codigo JS (obs: no HTML estão os span com a classe 'mensagem-erro')

import validadorCPF from "./validador-cpf.js";
import validadorData from "./validador-data.js";

let nome = document.querySelector("#name");
let data = document.querySelector("#date");
let formulario = document.querySelector("#formulario")
let quantidadePessoas = document.querySelector("#pessoas")


formulario.addEventListener("submit", function (e) {
    e.preventDefault();
   console.log(`Cliente ${nome.value} está agendando uma mesa de ${quantidadePessoas.value} para ${data.value}`); 
})


const campoFormulario = document.querySelectorAll("[required]")
campoFormulario.forEach((campo) =>{
    campo.addEventListener("blur", ()=> verificaCampo(campo));
    campo.addEventListener("invalid", evento => evento.preventDefault());
});

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

const mensagens = {
    name: {
        valueMissing: "O campo de nome num pode ficá vazio, não, sô.",
        patternMismatch: "Faz favor de preenchê um nome que seja válido, uai.",
        tooShort: "Uai, faz favor de pôr um nome direito aí."
    },
    email: {
        valueMissing: "Esse trem de e-mail não pode ficar vazio, sô.",
        typeMismatch: "Faz favor de preencher um e-mail que seja válido, uai.",
        tooShort: "Uai, faz favor de colocar um e-mail que sirva, sô."
    },
    telefone: {
        valueMissing: "Nóis precisa do seu número pra entrá em contato, uai.",
        patternMismatch: "Uai, esse número num existe, não.",
        tooShort: "Esse número tá faltando dígito, sô."
    },
    cpf: {
        valueMissing: 'Esse campo do CPF num pode ficar vazio, não, sô.',
        patternMismatch: "Faz favor de preencher um CPF que seja válido, uai.",
        customError: "Esse CPF que cê digitou não existe, sô.",
        tooShort: "Esse CPF tá faltando caractére, sô."
    },
    senha: {
        valueMissing: 'Nóis precisa de uma senha, pros trem de segurança, sô.',
        patternMismatch: "Por favor, preencha um senha válido.",
        customError: "Essa senha que cê digitou não tá batendo, sô.",
        tooShort: "Essa senha tá fraquinha demais, sô. Ocê precisa de uma mais fortinha pra segurá os trem ruim."
    },
    date: {
        valueMissing: 'Vai precisá escolhê uma data pra reservá, sô.',
        customError: 'Ô trem, num dá pra vortá no tempo pra te atendê nessa data, sô.'
    },
    termos: {
        valueMissing: 'Antes de seguir, ocê precisa aceitá os nosso tremo, sô.',
    }
}



function verificaCampo(campo) {
    let mensagem = "";
    if (campo.name == "cpf" && campo.value.length >= 11) {
        validadorCPF(campo);
    }if (campo.name == "date" && campo.value != "") {
        validadorData(campo)
    }
    tiposDeErro.forEach(erro => {
        if (campo.validity[erro]) {
            mensagem = mensagens[campo.name][erro]
            console.log(mensagem);
        }
    })
    const mensagemErro = campo.parentNode.querySelector('.mensagem-erro');
    const validadorDeInput = campo.checkValidity();

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