react-native-swiper not working after appending new slide items

In my TypeScript React Native mobile app, I'm using the react-native-swiper package and using all the latest packages/dependencies except @types/react-native (^0.70.6) and react-native (0.70.6). After I click a button, new slides will be appended and the swiper is not firing the slide change event (onIndexChanged) and the paginations bullets are not updating. The swiper pretty much stops working.

My Code:

// ...render(): ReactNode {  return <><App_Context.Consumer>      {(appcontext: AppContext_) => appcontext && <>        // Button here to append new slide `Content` item<View style={styles["parent"]}><Swiper            autoplay={false} horizontal={true} loop={false} index={0}            loadMinimal={true} pagingEnabled={true}            showsButtons={true} showsPagination={true}            onIndexChanged={(index: number): void => {              console.log(index); // Not working            }}>            {this.state.content.prcs.map((prc: Content, i: number) => <View key={i} style={styles["child"]}>              // Custom Video Player child component here</View>)}</Swiper></View></>}</App_Context.Consumer></>;}...export const styles = StyleSheet.create<{"parent": ViewStyle;"child": ViewStyle;}>({"parent": {    backgroundColor: "red",    borderColor: "blue", borderStyle: "solid",    borderWidth: 3, marginVertical: 20, width: "100%",    paddingTop: 5, paddingBottom: 5,    height: 480  },"child": {  }});