Dans l'un de mes composants de réagissage, je suis bloqué avec une erreur de syntaxe dans mon projet

Dans mon projet de réact, j'ai créé un seul composant manuellement qui est Person.js, je reçois une erreur de syntaxe dans l'App.js Composant.

Ceci est Person.js Composant P>

import React from 'react';
import './App.css';
import Person from './Person/Person'

function App() {
   state = {
    persons: [
      { name: 'Vamsi', age: 21 },
      { name: 'Shiva', age: 19 },
      { name: 'Angle', age: 24 }
    ]
  }
  render() {
    return (
      <div className="App">
        <Person name={this.state.persons[0].name}
          age={this.state.persons[0].age}>
        </Person>
        <Person name={this.state.persons[1].name}
          age={this.state.persons[1].age}>
        </Person>
        <Person name={this.state.persons[2].name}
          age={this.state.persons[2].age}>
        </Person>
        {/* <button>Switch Name</button> */}
      </div>
    );
  }
}


export default App;