Olá, espero que alguém consiga me ajudar porque já revirei o código e a internet atrás do erro mas não obtive sucesso...

Seguindo a mesma linha de raciocinio do curso estou desenvolvendo uma ficha de cadastro de cliente e adicionando tal cadastro a uma lista. Ao adicionar o novo HTML gerado pela ficha utilizando o innerHTML deu um erro falando que os dados inseridos na variável vinculada ao innerHTML são nulos, ou seja, não existem. Porém não há dados incorretos, gostaria de saber se alguém consegue enxergar o erro que não estou encontrando...

Vou mandar abaixo o código HTML cortado (pois a página do código por inteiro já está bem extensa...).

<ul class="lista">
            <h1 class="lista__titulo titulo-principal">Serviços Agendados</h1>
            <li class="lista__individual" data-cliente-add>
                <h2 class="lista__cabecalho">Juliana | Macaé | 25/10/2021 - 09:00 am</h1>
                <div class="lista__info">
                    <div class="lista__contato">
                        <div class="lista__telefone" data-form-contato>
                            <p class="telefone">Telefone:</p>
                            <p class="tel">(22) 98129-4354</p>
                        </div>
                        <div class="lista__endereco">
                            <p class="endereco">Endereço: </p>
                            <p class="endereco1">Rua das Palmeiras, 144, Nova Cidade</p>
                        </div>
                    </div>
                    <div class="lista__block">
                        <p class="lista__servico">Serviço: 1 Sofá 2 módulos retráteis.</p>
                        <p class="lista__valor">Valor: R$ 230,00</p>
                    </div>
                    <div class="lista__inputs">
                        <input type="button" value="Concluído">
                        <input type="button" value="Cancelar">
                    </div>
                </div>
            </li>
        </ul>

Agora abaixo vou mandar o arquivo JS. Observem que já realizei a adição com inner uma vez. Porém na segunda está dando esse erro e não consigo encontrar a solução... Segue o código:

    /*Função responsável por recolher as informações
  dos inputs e atribuir eles a uma variável*/
const criarTarefa = (evento) => {

  evento.preventDefault()

  /* Recolhem as informações do formulário */
  const cidadeInput = document.querySelector('[data-form-cidade]')
  const cidadeCliente = cidadeInput.options[cidadeInput.selectedIndex].text

  const dataInput = document.querySelector('[data-form-data]')
  const dataDoServico = dataInput.value

  const nomeInput = document.querySelector('[data-form-nome]')
  const nomeCliente = nomeInput.value

  const telefoneInput = document.querySelector('[data-form-telefone]')
  const telefoneCliente = telefoneInput.value

  const enderecoInput = document.querySelector('[data-form-endereco]')
  const enderecoCliente = enderecoInput.value

  const servicoInput = document.querySelector('[data-form-servico]')
  const servicoCliente = servicoInput.value

  const valorInput = document.querySelector('[data-form-valor]')
  const valorCliente = valorInput.value


  const novaLi = document.querySelector('[data-cliente-add]')
  const cabecalho = `    <h2 class="lista__cabecalho">${nomeCliente} | ${cidadeCliente} | ${dataDoServico}</h2>`
  novaLi.innerHTML = cabecalho;

  const novoTelefone = document.querySelector('[data-form-contato]')
  const addTelefone = `<p class="tel">${telefoneCliente}</p>`
  novoTelefone.innerHTML = addTelefone

}


    //Aciona o click do button e leva a execução da função.
const novaTarefa = document.querySelector('[data-form-adicionar]')
novaTarefa.addEventListener('click', criarTarefa)

Aguardo a resposta, E agradeço de antemão a ajuda!