Load some data asynchronously in Algolia React Instantsearch

I'm using algolia InstantSearch with React to load athletes data like this

<InstantSearch
  searchClient={searchClient}
  indexName={`${algoliaEnvironment}_athlete`}
>
  <div className="search-panel">
    <div className="search-panel__results">
      <SearchBox className="searchbox" />
      <InfiniteAthletes />
    </div>
  </div>
</InstantSearch>;

in InfiniteAthletes I'm extending InfiniteHits widget to implement infinite scroll functionality.

render() {
  const {hits} = this.props;
  ...
  return <TableWrapper
           columns={columns}
           dataSource={hits}
           loading={loading}
           rowKey={record => {
             return record.objectID;
           }}
          />;
   ...
}
...
export default connectInfiniteHits(InfiniteAthletes);

In props.hits I get some data about athletes. What I need to do is to asynchronously load athlete avatar(profile picture) into the "hits" props. So on every update in hits I get list of athlete ids, I should send async request to retrieve avatars and then set them into hits props to re-render the result with avatars included. This was easy task when I wasn't using algolia (with setState) but now I can't find a way to implement this and set new data into props.hits manually. I looked into documentation but can't find any info about how to achieve this.

Any help will be appreciated, thanks!