How to split list across several pages (SPFX/React)

[Cardinal_Night]

I'm creating a webpart that surfaces a SharePoint list. I'm trying to split the list up into pages, but getting stuck on basic JavaScript here, mixed with some React.

Here's the function that gets the list, at the top is where I am trying to work out how many pages are needed if I wanted to display 2 items per page and my attempt to slice the mapping of the new array.

public _getListItems() {
    
    sp.web.lists.getByTitle("Reports").items.get().then((items: any[]) => {
      let returnedItemsFullA: IListAItem[] = items.map((item) => { return new ListAItem(item); });
      console.log(returnedItemsFullA.length);
      let returnedItemsFullALength = returnedItemsFullA.length;

      let howManypagesA = Math.ceil(returnedItemsFullALength/2); //this works out how many pages will be needed to just show 2 items per page
      this.setState({ListAPages: howManypagesA});
      console.log(this.state.ListAPages+'state.ListAPages');     
     
      let pageNumber = this.state.ListAPage;

      let returnedItemsSlice: IListAItem[] = items.slice(pageNumber, pageNumber*2).map((item) => { return new ListAItem(item); });

      let returnedItems: IListAItem[] = items.map((item) => { return new ListAItem(item); });
      console.log(returnedItemsSlice);  
      this.setState({
        Items: returnedItems,
        ListAItems: returnedItemsSlice, 
        
      });

    });

I'm only getting 1 item on the first page and nothing on the second!

I have a function which updates a page number in state, which the above function uses to know what page number has been selected by the user.

Would I need to trigger the function above, every time the next or prev page is entered?