React native Gifted Chat lazy loader

Question

I want to code a lazy loader for my react native chat app. But when i code below i can get the data but i don't know how can i render my gifted chat component according to that data.

Here is my code:

const loadHandler = () => {
    chatsRef
      .orderBy("createdAt", "asc")
      .endBefore(messages[messages.length - 1])
      .limit(10)
      .get()
      .then((querySnapshot) =>
        querySnapshot.forEach((documentSnapshot) => {
          console.log(documentSnapshot.data()) //This print correctly
        })
      );

Above code retrieve the data from the first message that is rendered in page component.

Here is GiftedChat:

 return (
    <GiftedChat
      messages={messages}
      user={user}
      onSend={handleSend}
      loadEarlier={true}
      infiniteScroll={true}
      onLoadEarlier={() => loadHandler()}// Here is the prop for lazy loading
    />
  ); 

I see the documentation but i didn't find a way to implement lazy loader.