(REACT.JS)How to increment a data in my component

class Personne extends React.Component {
// constructor(props){
//     super(props);
// }
birthdayHandler = () => {
    let Age = this.props.age;
    let ageToNumber = parseInt(Age);
}

render(){
    return(
       <Fragment>
         <div className={classes.maintitle}>
            <h1 style={Name}> {this.props.name}</h1>
            <div> Job : {this.props.job}</div>
            <AgePersonne age={this.props.age}/>
            <div> Sexe : <strong style={sex}>{this.props.sexe ? "Homme" : "Femme"}</strong></div>
            <button onClick={(event) => this.birthdayHandler(event)} style={Button}>Birthday</button>
         </div>
       </Fragment>
    )
}

}

I would like to increment the age of the person by clicking on the button.

the AgePersonne component looks just like this :

const agePersonne = (props) => {
    const now = new Date();
    const year = now.getFullYear();
    return(
        <div>Age : {props.age} - année de naissance :{year - props.age -1}</div>
    )
};`

I did it already in a parent component with a button, but it increments all of my person’s age.
The APP component looks like this :

class app extends Component {

state = {
  personne: [
    {name: "Andy GARCIA", age: "28", job:"Web Dev", sexe: true},
    {name: "Sylvie MOISAN", age: "60", job:"nurse", sexe: false},
    {name: "Benjamin BARIOHAY", age: "27", job:"Web Dev", sexe: true},
    {name: "Galina RAZLIVANOVA", age: "29", job:"Web Security consultant", sexe: false},
    {name: "Maxime GIRARDEAU", age: "28", job:"Sailer", sexe: true},
  ]
}
  render() {
      return (
        <Fragment>
          <Horloge />
          <Personne {...this.state.personne[0]}/>
          <Personne {...this.state.personne[1]}/>
          <Personne {...this.state.personne[2]}/>
          <Personne {...this.state.personne[3]}/>
          <Personne {...this.state.personne[4]}/>
        </Fragment>
      )
  }

}

could you help me please ? I’m really lost, thank you