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 em 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)
}
```

Código HTML:

```
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Formulário</title>  
   
 </head>

<body>
    
<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>

<script type="text/javascript" src="inscricao.js"></script>
</body>


</html>
```