i am new to React and i am working on a CV project. I have the following situation: PersonalData.js (child) that handles a form dynamically updating the state of the component. App.js(parent) contains the function eventHandler that is passed to PersonalData as a prop:

<Route path="/" exact element={<PersonalData onChange={this.eventHandler}/>} />

On the child side, i use the prop as it follows when i click the submit button:

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.onChange(this.state)
  };

Returning to the parent component, the eventHandler looks like this:

  eventHandler = (data) =>{
    console.log(data.firstName)
    this.setState({
      firstName: data.firstName,
      lastName: data.lastName,
      age: data.age,
      location: data.location,
      email: data.email,
      phone: data.phone,
      gender: data.gender,
    })
    console.log(this.state);
  }

the first console.log shows the value, but after i update the state of the parent component, on the 2nd console.log the state is empty. Can't figure out what i am missing.