I have a React Native Typescript app, which will show numerous video players on the screen similar to Instagram or other apps. I get a list of data from a REST API, and as the user scrolls, the app will populate 5 items (video players) of that data. I want to restrict around 25 results in the ScrollView at a time. So as the limit of 25 is reached, it should delete the first 5 items and append 5 new items. I have to do this because my screen becomes very slow and laggy with the increasing number of video players. The code currently does not update the UI:

export const players_control: PlayersControl = {
    EACH_SET: 5,
    MAX_LIMIT: 25
};



    private onScrollReachedEnd(): void {
        if (contains(this.contents)) {
            const ti: Content[] = this.contents.slice(0, players_control.EACH_SET); // Get 5 each time
            this.contents = this.contents.slice(players_control.EACH_SET);
            if (contains(ti)) {
                this.setState((prevState: State) => {
                    const c: Content[] = [ ...prevState.contents, ...ti ]; // Add 5 new items
                    if (c.length >= players_control.MAX_LIMIT) {
                        // Delete first 5 items
                        c = c.slice(players_control.EACH_SET);
                    }
                    return { contents: c, ... /* Set few other values as well */ };
                }, (): void => {
                    this.nextStep();
                });
            }
        } else this.get(); // Get total results of around 100+ from REST API
    }