Código não funciona mais depois de colocar a mensagem de erro

Olá, depois que coloco a mensagem de erro mostrada no vídeo meu codigo não funciona mais. Comparei com o repositorio do github e não consegui achar o que pode estar errado. meu código:

async function buscaEndereco(cep) {
  var mensagemErro = document.getElementById('erro');
  mensagemErro.innerHTML = "";
  try {
    var consultaCEP = await fetch(`https://viacep.com.br/ws/${cep}/json/`);
    var consultaCEPConvertida = await consultaCEP.json();
    if (consultaCEPConvertida.erro) {
      throw Error("CEP não existente!");
    }
    //acessando o documento html e atribuin variaveis
    var cidade = document.getElementById('cidade');
    var logradouro = document.getElementById('endereco');
    var estado = document.getElementById('estado');

    //mudandos os valores dentrodos campos dos formulario
    cidade.value = consultaCEPConvertida.localidade;
    logradouro.value =consultaCEPConvertida.logradouro;
    estado.value =consultaCEPConvertida.uf;

    console.log(consultaCEPConvertida);
    return consultaCEPConvertida;
  } catch (erro) {
    mensagemErro.innerHTML = `<p>CEP inválido. Tente novamente!</p>`
    console.log(erro);
  }
}

var cep = document.getElementById("cep");
cep.addEventListener("focusout", () => buscaEndereco(cep.value)); //focusout

mensagem de erro no console:

Uncaught (in promise) TypeError: mensagemErro is null buscaEndereco http://127.0.0.1:5500/script.js:3 http://127.0.0.1:5500/script.js:29