Flatlist Re rendering: VirtualizedList: You have a large list that is slow to update

I am using a functional component to render a flatlist, and when the list needs to re render it is doing so ineffeciently. I have tried to format the code better and implement React.memo, useMemo, useCallback, but I keep failing. I thought I implemented React.memo here but I must be doing something wrong, because I still get the warning in the terminal that "You have a large list that is slow.."

Any help implementing the proper methods to prevent unnecessary re renders would be greatly appreciated.

const MemoRender = React.memo(() => {



  const renderItem = ({item, index}) => {
  
    return (
      <HStack space={2}>
      <Center >
   
                <Text >
                
                  {'Serial : '}
                  {item.Serial}
                </Text>
               
                <Text>
                  {'Type : '}
                  {item.Type}
                </Text>
                </Center>
                <Center >
                <Text>
                  {'Brand : '}
                  {item.Brand}
                </Text>
                <Text>
                  {'Model : '}
                  {item.Model}
                  
                </Text>
                <Text>
                  {'Room : '}
                  {item.Room}
                  
                </Text>
                </Center>
                <Center>
                <Button transparent icon onPress={() => editUser(item)}>
                  <Icon as={Ionicons}  active name="create" />
                </Button>
                <Button transparent onPress={() => deleteUser(item)}>
                  <Icon as={Ionicons} active name="trash" />
                </Button>
                </Center>
                </HStack>
    );
  };
  const memoizedValue = useMemo(() => renderItem, [users]);
  

  const [page,setPage] = useState(1);
  const [users, setUsers] = useState([]);
  const fetchMoreData = () => {
    setPage((prev) => prev + 1);
}

useEffect(() => {
    
  console.log('mounted');
  
  //const userRef = firebase.database().ref('/users');
  const userRef = firebase.database().ref('/users' + '/C Room');
  const OnLoadingListener = userRef.on('value', (snapshot) => {
    //setUsers([]);
    const list = [];
    snapshot.forEach(function (childSnapshot) {
      list.push(childSnapshot.val());
    });
    setUsers(list);
  });
  

  
  const childRemovedListener = userRef.on('child_removed', (snapshot) => {
    // Set Your Functioanlity Whatever you want.
    //alert('Child Removed');
  });

  const childChangedListener = userRef.on('child_changed', (snapshot) => {
    // Set Your Functioanlity Whatever you want.
   // alert('Child Updated/Changed');
  });

  return () => {
    userRef.off('value', OnLoadingListener);
    console.log('unmounting...');
   
    //userRef.off('child_removed', childRemovedListener);
   // userRef.off('child_changed', childChangedListener);
  };
}, []);


useEffect(()=> {
  if(page){

  }
},[page]);
const deleteUser = (Item) => {
  firebase.database()
    .ref('users/' + '/C Room'+ '/' + Item.Id)
    .remove()
    .then(() => {})
    .catch((err) => {
      console.log(err);
    });
};


const deleteAllUsers = () => {
  firebase.database()
     .ref('users')
     .remove()
     .then(() => {
       setUsers([]);
     });
 };


return (
 
   
  <FlatList 
  data={users}
  style={styles.scrollView}
  renderItem={memoizedValue}
  keyExtractor={(item,index) => index.toString()}
  extraData={users}
  onEndReachedThreshold={0.3}
  onEndReached={fetchMoreData}
  
  contentContainerStyle={{padding: 5,backgroundColor: "green"}}
  getItemLayout={(_, index) => ({
    length: 60 + 20, //  WIDTH + (MARGIN_HORIZONTAL * 2)
    offset: (60 + 20) * (index),  //  ( WIDTH + (MARGIN_HORIZONTAL*2) ) * (index)
    index,})}

      
  />

)

}, [])