SectionList jumps/glitches when paginated list gets appended at the bottom

The response of my paginated code looks something like -

Page 1

0: {title: '2024-07-11', data: Array(3)}1: {title: '2024-07-12', data: Array(1)}2: {title: '2024-07-15', data: Array(2)}3: {title: '2024-07-16', data: Array(1)}4: {title: '2024-07-17', data: Array(1)}5: {title: '2024-07-19', data: Array(3)}6: {title: '2024-07-20', data: Array(2)}7: {title: '2024-07-22', data: Array(2)}8: {title: '2024-07-23', data: Array(4)}9: {title: '2024-07-24', data: Array(1)}length: 10

Page 2

0: {title: '2024-07-11', data: Array(3)}1: {title: '2024-07-12', data: Array(1)}2: {title: '2024-07-15', data: Array(2)}3: {title: '2024-07-16', data: Array(1)}4: {title: '2024-07-17', data: Array(1)}5: {title: '2024-07-19', data: Array(3)}6: {title: '2024-07-20', data: Array(2)}7: {title: '2024-07-22', data: Array(2)}8: {title: '2024-07-23', data: Array(4)}9: {title: '2024-07-24', data: Array(1)}10: {title: '2024-07-24', data: Array(3)}11: {title: '2024-07-11', data: Array(3)}12: {title: '2024-07-12', data: Array(1)}13: {title: '2024-07-15', data: Array(2)}14: {title: '2024-07-16', data: Array(2)}15: {title: '2024-07-18', data: Array(2)}16: {title: '2024-07-19', data: Array(3)}17: {title: '2024-07-22', data: Array(2)}18: {title: '2024-07-23', data: Array(2)}length: 19

Page 3

0: {title: '2024-07-11', data: Array(3)}1: {title: '2024-07-12', data: Array(1)}2: {title: '2024-07-15', data: Array(2)}3: {title: '2024-07-16', data: Array(1)}4: {title: '2024-07-17', data: Array(1)}5: {title: '2024-07-19', data: Array(3)}6: {title: '2024-07-20', data: Array(2)}7: {title: '2024-07-22', data: Array(2)}8: {title: '2024-07-23', data: Array(4)}9: {title: '2024-07-24', data: Array(1)}10: {title: '2024-07-24', data: Array(3)}11: {title: '2024-07-11', data: Array(3)}12: {title: '2024-07-12', data: Array(1)}13: {title: '2024-07-15', data: Array(2)}14: {title: '2024-07-16', data: Array(2)}15: {title: '2024-07-18', data: Array(2)}16: {title: '2024-07-19', data: Array(3)}17: {title: '2024-07-22', data: Array(2)}18: {title: '2024-07-23', data: Array(2)}19: {title: '2024-07-24', data: Array(1)}20: {title: '2024-07-25', data: Array(5)}21: {title: '2024-07-11', data: Array(2)}22: {title: '2024-07-12', data: Array(4)}23: {title: '2024-07-15', data: Array(1)}24: {title: '2024-07-17', data: Array(2)}25: {title: '2024-07-18', data: Array(1)}26: {title: '2024-07-20', data: Array(1)}27: {title: '2024-07-22', data: Array(1)}length: 28

I am using react-query's useInifiniteQuery and page values are flattened.

When the third and the final page is fetched and rendered, I see the following glitch -

import format from 'date-fns/format';import { useCallback } from 'react';import { RefreshControl, SectionList, View } from 'react-native';import { BookableAppointment } from '@app-types/appointments';import {  AppointmentCard,  AppointmentListLoader,} from '@components/app-specific';import { CircularLoader, Typography } from '@components/core';import { createUseStyle } from '@theme';import { useGetAppointmentBooking } from '../../hooks/get-appointment-booking';export const useBookableAppointmentsStyle = createUseStyle(t => ({  listEmptyContainer: {    flex: 1,    alignItems: 'center',    justifyContent: 'center',  },  header: {    backgroundColor: t.palette.background.main,  },  contentContainer: {    gap: 16,    paddingVertical: t.moderateVerticalScale(10, 1),    flexGrow: 1,  },}));export const BookableAppointments = () => {  const styles = useBookableAppointmentsStyle();  const {    data,    isLoading,    isFetchingNextPage,    loadMore,    isRefetching,    refetch,  } = useGetAppointmentBooking();  const renderBookableAppointment = useCallback(    ({ item }: { item: BookableAppointment }) => {      return (<AppointmentCard          key={item.EndDateTime.toString()}          appointment={{            EndDateTime: item.EndDateTime,            Id: item.Id,            LocationName: item.LocationName,            StartDateTime: item.StartDateTime,          }}        />      );    },    [],  );  const onPullToRefresh = useCallback(async () => {    await refetch();  }, [refetch]);  if (isLoading && !data.length) {    return <AppointmentListLoader />;  }  const ListEmptyComponent = !isLoading ? (<View style={styles.listEmptyContainer}><Typography variant="body1" color="description" align="center">        Unfortunately, there are no available appointments for the selected date        range.</Typography></View>  ) : null;  const renderSectionHeader = ({    section: { title },  }: {    section: { title: string };  }) => (<View style={styles.header}><Typography variant="h4" weight="bold">        {format(new Date(title), 'EEEE, dd MMMM yyyy')}</Typography></View>  );  return (<SectionList      keyExtractor={item => item.EndDateTime.toString()}      sections={data}      renderItem={renderBookableAppointment}      refreshControl={<RefreshControl refreshing={isRefetching} onRefresh={onPullToRefresh} />      }      onEndReached={loadMore}      onEndReachedThreshold={0.5}      ListFooterComponent={        isFetchingNextPage && data.length ? <CircularLoader /> : null      }      ListEmptyComponent={ListEmptyComponent}      renderSectionHeader={renderSectionHeader}      contentContainerStyle={styles.contentContainer}    />  );};

I have tried adding initialNumToRender, maxToRenderPerBatch, etc for additional performance gains but things became worse.

I am not sure why things render perfectly on the 2nd page but I see this glitch when the 3rd page renders