Array não adiciona um dado no formulário no último elemento através do método push em uma função click. 

Fiz algumas pesquisas, mas não encontrei uma resposta significativa.
A dúvida é de iniciante, criei um pequeno formulário em HTML, a ideia era pegar os dados digitados e enviar para um objeto e guardar os dados através de um array com um evento click, o array pegaria estes dados através do método push().

Com o código abaixo, os dados não deveriam ser adicionados a cada click no último elemento do array? Os dados estão sendo adicionados sempre no primeiro elemento sobrescrevendo o dado anterior. 

Segue o código:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    let botao = document.getElementById('botao')
    botao.addEventListener('click', guardar)

    let cadastro = []

    function guardar() {
      let nome = document.getElementById('nome').value
      let idade = document.getElementById('idade').value
      let email = document.getElementById('email').value


      let pessoa = {
        nomeCliente: nome,
        emailCliente: email,
        idadeClient: idade
      }
      cadastro.push(pessoa)
    }

<!-- language: lang-html -->

    <form>
      <ul style="list-style-type:none;">

        <li><label type="text" for="nome">Nome:</label>
          <input type="text" aria-required="true" id="nome"></li>
        <br>
        <li><label type="email" for="email">E-mail:</label>
          <input type="email" id="email"></li>
        <br>
        <li><label type="text" for="idade">Idade:</label>
          <input type="number" id="idade">
          <li>
            <br>
            <li><button type="submit" id="botao">Enviar</button></li>
      </ul>
    </form>

<!-- end snippet -->