TypeError: this.state.persons.map n'est pas une fonction merci

Je suis nouveau pour réagir et seulement comprendre les bases. J'ai eu ce projet de quelqu'un à regarder, mais je me gratte ma tête depuis le matin avec ce problème:

import React, { useState, Component } from 'react';
import './App.css';
import Person from './Person/Person';
import person from './Person/Person';
import { render } from '@testing-library/react';

class App extends Component {
   state =
   {
    persons:[
    {id: '123', name:'Max', age: 28 },
    {id: '124',name:'Mari', age: 26 },
    {id: '125',name: 'laly', age: 20 }

  ],
  showPersons: false 
  }

nameChangeHandler=( event,id ) =>
{ const personIndex = this.state.persons.findIndex(p=>{
  return p.id === id;
});

const person = {...this.state.persons[personIndex]
};
person.name=event.target.value;
const persons=[ ...this.state.persons];
persons[personIndex]=person;
  this.setState(
    {
      persons:person
    }
  )
}

togglePersonHandler =  ()=>
{
const doesShow = this.state.showPersons;
this.setState ({showPersons: !doesShow});
}

deletePersonHandler= (personIndex)=> {
//const persons = this.state.persons;
const persons = [...this.state.persons]
persons.splice(personIndex,1);
this.setState({persons:persons});
}
  render()
{
  const style ={
    backgroundColor:'yellow',
    font:'inherit',
    border:'1px solid blue',
    padding:'8px',
    cursor:'pointer'
  };

  let persons=null;
  if (this.state.showPersons){
   persons= (
   <div>
    {this.state.persons.map((person,index)=> {return <Person click={() => this.deletePersonHandler(index)}
    name = {person.name} 
    age = {person.age} 
    key={person.id}
    change ={(event) => this.nameChangeHandler(event,person.id)}
     />
     })};
  </div>)

  };

 return (

  <div className="App">
      <h1>Hi This is react App</h1>
      <button style={style} onClick={this.togglePersonHandler}> Toggle Persons</button>

       {persons}


    </div>
  ); 
    }
    }

export default App;