The following scrollToEnd leveraging the messagesListRef isn’t working for some reason (There are no errors or warnings either):

import { useState, useRef } from "react";
import {FlatList, View, Text} from "react-native";

export default function FlatlistComponent(){
 const messagesListRef = useRef(null);

  function messageListHandler(msgsRef) {
    return msgsRef.current.scrollToEnd();
  }

return (
   <FlatList
        ref={messagesListRef}
        onLayout={() => {
           messageListHandler(messagesListRef);
        }}
        data={messagesData}
        renderItem={({item, index}) => messagesWrapper}
        keyExtractor={(message) => message.id}
   />
}

I have tried placing the scrollToEnd call within a useEffect and a setTimeOut on separate occasions but neither of the ideas work.

Also, please note that nearly all the other questions and answers regarding similar issues more or less are very old and involve class components and hence deal with this issue differently. I have tried many of the solutions mentioned in them but none of those work. Kindly do not flag the question as duplicate without comparing the provided code with the code in the supposed solution and if it does match, please add a link to the thread in the comments first. Thanks!