Как добавить введённые данные в списки при этом не удаляя данные введённые раньше?

Есть сайт в котором вводиться имя и фамилия. Как сделать так чтоб все введённые имена и фамилии отображались на экране.

import React,{Component} from 'react';
import './App.css';

class PersonInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      first_name: "",
      last_name: ""
    };
    this.newFighterFirstname = this.newFighterFirstname.bind(this);
    this.newFighterLastname = this.newFighterLastname.bind(this);
    this.myButton=this.myButton.bind(this);
  }
  
  newFighterFirstname(event) {
    this.setState({first_name : event.target.value})
  }

  newFighterLastname(event) {
    this.setState({last_name  : event.target.value})
  }

  myButton(event) {
  this.setState({first_name : ""})   //нужны для очищение полей в input
  this.setState({last_name  : ""})  //нужны для очищение полей в input
  console.log(this.state.first_name , this.state.last_name)
  event.preventDefault();
  }
  render() {
    const fullname = [this.state];
    const name = fullname.map((name,index) => <li key={index}>{name.first_name} {name.last_name}</li>);
    return (
      <div>
        <form >
          <input type="text" 
          placeholder="Имя" 
          value={this.state.first_name}
          onChange={this.newFighterFirstname} 
          /> 
          <input  type="text" 
          placeholder="Фамилия"
          value={this.state.last_name}
          onChange={this.newFighterLastname}
          />
          <button onClick={this.myButton}>Сохранить</button> 
          <ul>
            {name}  //здесь отображались все введённые имена и фамилии а не только последние
          </ul>     
        </form>
      </div>
    )
  }
}

export default PersonInput;