Реакция: Предупреждение: React.createElement: тип недействителен

Так что я просто начал с реакции и просматривал одно из видео о «Обработке динамического контента в реакции»).

Итак, наша основная цель - отображать три окна с помощью функции карты, когда мы нажимаем кнопку.

Изначально мы создали такой объект состояния

state = {
    person: [
    {name: "Rohit", age: 24},
    {name: "Hariom", age: 23},
    {name: "Vaibhav", age: 58}
  ],
  someOtherState: "Untouched state",
  showPerson: false
}

А потом мы попробовали что-то подобное для условного и сопоставления

 render() {

    let person = null;

    if (this.state.showPerson) {
      person = (
        <div>
          {this.state.person.map(Person => {
            return <Person
            name = {Person.name}
            age = {Person.age} />
          })}
          </div>
     );
    }

Затем следует это

return (

  <div className = "App">
        <h1> Hi I am react App</h1>
        <button onClick = {this.togglerPersonHandler}>Button</button>
        {person}
    </div>
      );
   }
}

Теперь, когда я нажимаю кнопку, она выдает следующую ошибку (три раза)

index.js:2178 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check your code at App.js:54.
    in App (at index.js:7)

а также

index.js:2178 The above error occurred in the <div> component:
    in div (at App.js:52)
    in div (at App.js:63)
    in App (at index.js:7)

Consider adding an error boundary to your tree to customize error handling behavior.

Что я здесь делаю не так? (THe togglerPersonHandler просто изменяет значение someOtherState). Сообщите мне мою ошибку и исправьте.