Flatlist gets disoriented/shrank after an item is removed

Flatlist - Before

Flatlist - After

My flatlist component gets disoriented and shrunk after removing an item via Swipeable layout. For a better comprehension on my issue, please refer to the following code snippets.

1. FlatList Component

<FlatList<GeneratedResults>        data={serialNumbers}        keyExtractor={item => item?.generatedDate}        renderItem={({item, index}) => (<HistoryList            deleteAction={deleteAction1}            favouriteAction={favouriteAction}            index={index}            navigatetoAllNumbersScreen={navigatetoAllNumbersScreen}            item={item}            setRowRefs={setRowRefs}            rowRefs={rowRefs}          />        )}      />

2. Individual Item (History List)

<Swipeable      ref={ref => {        if (ref && !rowRefs.get(index)) {          const val = rowRefs.set(index, ref);          setRowRefs(val);        }      }}      onSwipeableWillOpen={() => {        [...rowRefs.entries()].forEach(([key, ref]) => {          if (key !== index && ref) {            ref.close();          }        });      }}      renderRightActions={() => {        return (<TouchableOpacity            onPress={deleteOnPress}            style={tw(' h-full justify-center')}><Text style={tw('px-4 text-center py-3 text-xl bg-red text-white')}>              Delete</Text></TouchableOpacity>        );      }}      renderLeftActions={() => {        return (<TouchableOpacity            disabled={item.isFavourite}            onPress={favouriteOnPress}            style={tw(' h-full justify-center')}><Text              style={tw('px-4 text-center py-3 text-xl bg-black text-white')}>              {item.isFavourite ? 'Added to Favourite' : 'Favourite'}</Text></TouchableOpacity>        );      }}><View style={tw('flex-1 flex-row mx-2 my-3 items-center')}><View          style={tw('rounded-full h-14 w-14  items-center justify-center bg-primary',          )}><Text style={tw('text-white text-xl')}>            {item.generatedNumbers[0].charAt(0)}</Text></View><Text          style={tw('pl-2 text-xl bg-white text-black border-2 py-2 border-primary -mx-1.5 rounded flex-1',          )}>          {item.generatedDate}</Text><View style={tw('w-14 h-full bg-lightGrey rounded flex-row')}><Text style={tw('text-center text-xl text-white w-full self-center')}>            {item.count}</Text></View><TouchableOpacity          onPress={navigatetoAllNumbersScreenOnPress}          style={tw('w-12 h-full bg-lightGreen rounded justify-center')}><AntDesignIcon            name="right"            style={tw('self-center')}            color={getColor('white')}            size={25}          /></TouchableOpacity></View></Swipeable>

3. Delete Implementation

  const deleteAction1 = (date: string, index: number) => {    const newArrayAfterRemovedItem = _.reject(serialNumbers, {      generatedDate: date,    });    setSerialNumbers(newArrayAfterRemovedItem);  };

4. useState Declaration

  const [serialNumbers, setSerialNumbers] = useState<GeneratedResults[]>();

5. Initialisation with setState

 useEffect(() => {    setSerialNumbers([      {        generatedDate: 'bac',        isFavourite: false,        count: 100,        generatedNumbers: ['123', '32', '43', '23'],      },      {        generatedDate: 'abcx',        isFavourite: false,        count: 100,        generatedNumbers: ['123', '32', '43', '23'],      },      {        generatedDate: 'abcxgf',        isFavourite: false,        count: 100,        generatedNumbers: ['123', '32', '43', '23'],      },    ]);  }, []);