react-native-viewpager issue on iOS while deleting the last item in array/view

I am able to delete the last view/item from viewPager on android and it would switch the view to the previous screen. But the same thing doesn't work in iOS. On iOS it would delete the last view but wouldn't switch and shows a blank page, but when you scroll old view renders again.

ViewPages.js

import React, { useState, useEffect } from "react";
import { Image, ScrollView } from "react-native";
import {
  Container,
  View,
  Button,
  Text,
  Left,
  Right,
  Content,
  Icon,
  Header,
  Fab
} from "native-base";
import { useTemplateState } from "../../../contexts/TemplateContext";
import {
  useScreenTypeState,
  useScreenTypeUpdate
} from "../../../contexts/ScreenTypeContext";

import CardView from "./CardView";

import ViewPager from "@react-native-community/viewpager";

export const ScreenTypeSelection = ({ route }) => {
  let { screenCount } = useTemplateState();
  let dispatch = useScreenTypeUpdate();
  let value = useScreenTypeState();
  const [active, setActive] = useState(false);

  useEffect(() => {
    dispatch({ type: "screen", payload: { screenCount } });
  }, []);

  const [currentIndex, setCurrentIndex] = useState(0);
  const [currentPage, setCurrentPage] = useState(0);

  return (
    <ScrollView contentContainerStyle={{ flex: 1 }}>
      <ViewPager
        style={{ flex: 1 }}
        initialPage={currentPage}
        onPageSelected={e => setCurrentIndex(e.nativeEvent.position)}
        showPageIndicator={true}
      >
        {value.length > 0 &&
          value.map((card, index) => {
            return (
              <View style={{ alignItems: "center" }} key={index}>
                <CardView key={card.pageNumber} card={card} />
              </View>
            );
          })}
      </ViewPager>
      <Fab
        active={active}
        direction="up"
        containerStyle={{}}
        style={{ backgroundColor: "#5067FF" }}
        position="bottomRight"
        onPress={() => setActive(!active)}
      >
        <Icon name="create" />
        <Button
          style={{ backgroundColor: "#3B5998" }}
          onPress={() => {
            dispatch({
              type: "delete_page",
              payload: { currentIndex }
            });
            setCurrentPage(currentIndex - 1 < 0 ? 0 : currentIndex - 1);
          }}
        >
          <Icon name="remove" />
        </Button>
        <Button
          style={{ backgroundColor: "#34A34F" }}
          onPress={() => {
            dispatch({
              type: "add_page",
              payload: { currentIndex }
            });
            setCurrentPage(currentIndex + 1 )
          }}
        >
          <Icon name="add" />
        </Button>
      </Fab>
    </ScrollView>
  );
};

package: @react-native-community/react-native-viewpager

Github: https://github.com/react-native-community/react-native-viewpager

After doing some research found that it is an open issue on GitHub

Is there any solution to it or any workaround that helps to reflect the same functionality on iOS as well?

I know there are other third-party packages available as well, but I would like to see if I can do it using react-native core modules.

If there is any more detail needed, let me know.