Render component after data is fetched in React

I am learning React and I am currently having a hard time getting my data in the component.

The problem is I couldn't re-render my component after the data is loaded.

Here's my script:

 constructor(props) {
    super(props);
    this.state = {
      isFetched: false,
      profile: []
    }
  }

async componentDidMount() {
 let profile = await checkProfile();
 if(profile && !isEmpty(profile)) {
   this.state.profile = profile;
   this.state.isFetched = true;
 }
}

render() {
    return this.state.isFetched ? <HomeTPL {...this.props} /> : 'Loading data please wait...';
    // return <HomeTPL {...this.props} />
  }

I am stuck on this message Loading data please wait... even the data is already fetched.