JSX

Bom dia, fiz um código em jsx que esta dentro de uma função que pega o valor de cada input e coloca no valor digitado na pagina, só que toda vez que digito um valor e clico no botão ele apaga todos os input e o botão, e depois os valores são colocado na página. Eu queria que esses valores fossem colocado em baixo dos inputs e do botão e não apagassem nada

 cadastrar = (event) => {
    const { name, lastName, email } = this.state

      const myelement = (
        <div>
          <a>Nome: {name}</a><br />
          <a>Sobrenome: {lastName}</a><br/>
          <a>E-mail: {email}</a><br />
        </div>
      )
      ReactDOM.render(myelement, document.getElementById('root'));

    event.preventDefault()
  }