React - I am passing state from a child to a parent component but the state value is off by one update cycle

I am currently using the the following code to pass a state value to a parent component. However, the input text if off by one character. I know that it is due to the fact that I am changing state and passing it in the same function but how would I fix this? I can’t seem to get my head around it.

Here is my code:

import React from 'react';
import {render} from 'react-dom';

class App extends React.Component {
  constructor() {
    super();
    this.parentmethod = this.parentmethod.bind(this);
    this.state = {
      datafromChild: ''
    };
  }
  //here 'data' represents the data recieved from the child when this method gets called inside the child
  parentmethod(data) {
    this.setState({
      datafromChild: data
    });
  }
  
  render() {
    return (
      <div>
        <Child methodfromparent={this.parentmethod} /> 
        <br/><br/>
        <hr/><strong>Inside Parent</strong>
        <h5>Data from Child:<br />{this.state.datafromChild}
        <hr/>
        </h5>
      </div>
    );
  }
}


class Child extends React.Component {
  constructor() {
    super();
    this.handleChange = this.handleChange.bind(this);
    this.state = {
      data: ''
    };
  }
  
 
  
  handleChange(event) {
    this.setState({
      data: event.target.value
    });
    this.props.methodfromparent(this.state.data);

  }

  render() {
    return (
      <div>
     <hr/><strong>Inside Child</strong>
          <input type="text" onChange={this.handleChange} />
         <hr/>
       
      </div>
    );
  }
}

render(
  <App />,
  document.getElementById('root')
);