Map method keeps returning an array of objects causing an errror in React

I am trying to iterate over the persons state and return multiple people through a component but I keep getting Uncaught Error: Objects are not valid as a React child (found: object with keys {allPeople}). If you meant to render a collection of children, use an array instead. It works if I put the map function directly in the return but not like this where I store it in a variable first and the enter the variable in the return, Thanks

 class App extends Component {
  
  state = ({
    persons: [
      {
        name: "John",
        age: 26,
        id: 1
      },
      {
        name: "Kim",
        age: 29,
        id: 2
      },
      {
        name: "Dave",
        age: 59,
        id: 3
      }
    ],
    newName: '',
    click: false
  })

  handlePeople = (e, id) => {

    this.setState({newName: e.target.value});
  }

  handleBtn = () => {
    this.setState({click: !this.state.click})
  }

  handleDelete = (e) => {
    console.log(e)
    
  }

    render() {
    let allPeople = null;
    allPeople = ( 
      <div>
          {this.state.persons.map((person, index) => {
            console.log(typeof person.name)
                 return <NameBox
                   key={person.id}
                   clickDel={() => this.handleDelete(index)}
                   name={person.name}
                   age={person.age}
                   changed={(e) => this.handlePeople(e, person.id)}
                   />
          })}
      </div>
    )
    console.log(allPeople)
    return (
      <div className="App">
        <h1>Person Manager</h1>
        <p>This is really working</p>
        <ClickBtn toggle={this.handleBtn} color={this.state.click}/>
        {this.state.click === false ? null : {allPeople}}
      </div>
    );
  }
  
}

export default App;