I am calling a function from the render method to fetch the updated data like this. but i am not getting the data on page because before getting the data my jsx is parsing . Here is my code

private fetchMessages = async () => {
const isArray = Array.isArray(this.props.messages);
let messagesData: any;

console.log(this.props.messages);
messagesData = this.props.messages;
if (!isArray) {
  const result = await this.props.messages.fetchByOffset({
    offset: null,
  });
  const results = result.results;
  messagesData = results.map((value: any) => {
    return value.data;
  });
}
return await messagesData;

};

in render function i am calling like this

 private getData() {
this.fetchMessages().then(messageResponse => {
  this.jetMessages = this.processCustomMessageArray(messageResponse);

  return new ArrayDataProvider<null, ojMessage.Message>(this.jetMessages);

});
return null;

}

render(props: Readonly<Props>): ComponentChild {
    this.jetMessagesDataprovider = this.getData();
    
    return (
      <div
        id={`${this.uid}_stickycontainer`}
        class="oj-sp-messages-banner-sticky-container"
      >
        <oj-messages
          id={`${this.uid}_messagecontainer`}
          messages={this.jetMessagesDataprovider}
          displayOptions={this.computedCategoryOption}
        >
          <template slot="messageTemplate" render={this.renderMessage} />
        </oj-messages>
      </div>
    );
  }