Append Data in 'Flatlist' without refreshing complete 'Flatlist' in react native

FlatList comes with the option to fetch the next set of data from API when listview reaches the end and we can also use the scrollTo Function to retain the last scroll position of Flatlist but implementing this way is creating reloading fell of FlatList on every next pagination data request the complete listview loads & we scroll to last left position. Anyways if we can implement a feature where existing data in the Flatlist is not refreshed and only new data append to the bottom without changing scroll position in react native will help render the FlastList in a more optimized way. Any help on the suggestion will be appreciated.

Pagination example:-

class FidsListview extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: false,
      studentData: [],
      currentPage: 0,
      lastPage: 0,
    };

    this.getChildrenApi = this.getChildrenApi.bind(this);
  }

  componentDidMount() {
    this.getChildrenApi();
  }

  getChildrenApi() {
    let currentPage = this.state.currentPage + 20;
    fetch(
      `https://fids.myairports.com.my/api/flights/get-flight-departures-cache?skip=${currentPage}&take=${
        currentPage + 20
      }&terminal=KLIA`
    )
      .then((result) => result.json())
      .then((res) => {
        if (
          res.flightStatuses != null &&
          res.flightStatuses != undefined &&
          res.flightStatuses.length > 0
        ) {
          this.setState({
            studentData: res.flightStatuses,
          });
        } else {
          this.setState({ studentData: [] });
        }
      });
  }

  lodeMoreData() {
    let nextPage = this.state.currentPage + 20;

    fetch(
      `http://paginationapi.com?skip=${nextPage}&take=${
        nextPage + 20
      }&terminal=KLIA`
    )
      .then((result) => result.json())
      .then((res) => {
        if (
          res.flightStatuses != null &&
          res.flightStatuses != undefined &&
          res.flightStatuses.length > 0
        ) {
          this.setState({
            studentData: [...this.state.studentData, ...res.flightStatuses],
            currentPage: nextPage,
          });
        } else {
          this.setState({ studentData: [] });
        }
      });
  }

  render() {
    return (
      <View style={{}}>
        <FlatList
          style={{ backgroundColor: "#FFF" }}
          showsVerticalScrollIndicator={false}
          data={this.state.studentData}
          numColumns={3}
          ListFooterComponent={() => <View style={{ marginBottom: 300 }} />}
          extraData={this.state.studentData}
          renderItem={({ item, index }) => (
            <View style={{ height: 100, backgroundColor: "#EEE" }}>
              <Text>{item.afsKey}</Text>
            </View>
          )}
         
        />
        {this.state.isLoading && (
          <View
            style={{
              width: "100%",
              height: "100%",
              alignItems: "center",
              justifyContent: "center",
              position: "absolute",
            }}
          >
            <ActivityIndicator size="large" color={"white"} />
          </View>
        )}
      </View>
    );
  }
}

export def

ault FidsListview;