Resuming Infinite Scrolling after navigating away from and back to a Page

I’m currently developing a mobile application using Ionic and React. The application pulls some posts from a WordPress API and displays them in a list. I’m using IonInfiniteScroll to continue to load posts as the user scrolls through them.

The issue I’m having is maintaining and resuming the state of the list after navigating away from and back to the page. For instance, my app currently has 3 tabs, one of which displays the list of posts. If the user scrolls down the list to post 100, navigates to another tab then navigates back to the list of posts, the app loses the list of posts, causing the user to lose their spot in the list.

Here’s the code for the page that displays the list of posts:

import React from 'react';
import {
    IonContent, IonHeader, IonList, IonPage, IonTitle,
    IonToolbar, useIonViewDidEnter, IonInfiniteScroll, IonInfiniteScrollContent,
} from '@ionic/react';
import './Tab1.css';
import {useWordPressNotificationsApi} from "../hooks/useWorpressNotificationsApi";
import NotificationCard from "../components/NotificationCard";

const Tab1: React.FC = () => {
    const { notifications, getNotifications } = useWordPressNotificationsApi();

    useIonViewDidEnter(() => {
        getNotifications();
    });

    function loadData(event: any) {
        getNotifications();
        (event.target as HTMLIonInfiniteScrollElement).complete().then();
    }

    return (
        <IonPage>
            <IonHeader>
                <IonToolbar>
                    <IonTitle>Notifications</IonTitle>
                </IonToolbar>
            </IonHeader>
            <IonContent fullscreen>
                <IonHeader collapse="condense">
                    <IonToolbar>
                        <IonTitle size="large">Tab 1</IonTitle>
                    </IonToolbar>
                </IonHeader>
                <IonList>
                    {notifications.map((note, index) => (
                        <NotificationCard
                            title={note.title}
                            content={note.content}
                            url={note.url}>
                        </NotificationCard>
                    ))}
                </IonList>
                <IonInfiniteScroll
                    threshold="50%"
                    onIonInfinite={(e: CustomEvent<void>) => loadData(e)}>
                    <IonInfiniteScrollContent
                        loadingText={"Fetching Past Notifications..."}>
                    </IonInfiniteScrollContent>
                </IonInfiniteScroll>
            </IonContent>
        </IonPage>
    );
};

export default Tab1;

As you can see, this list of posts (referred to in the app as ‘notifications’) is stored in an array obtained from a React Hook, with the hook also providing the function that is used to load posts into the list. What I want to know is, how do I save the contents of this array so that when the user navigates away from the page and back to it, the content is restored and the user can resume scrolling through the posts from where they were when they left the page.