getting error in recursive function

Question

I use SPFX React, I am getting data from SharePoint Library which is more than 50000. So I want to make a function for getting data in data table library on behalf of page size and page number.

For example I have 100 data, and page size is 10, so the first time only 10 data is fetched and when I click on next page number than next 10 data will be fetched so that I can reduce the time for getting data. This is just like recursive function.

I made function for this, but I got some error when I click on 11th and more than that page, the web page is blank and the error is:

Type Error: Cannot read properties of undefined (reading 'ID')     at Function. Get (utils.js:29:1)     
at body.js:141:1     
at Array. map (<anonymous>)

below is my code:

const fetchPreviousID = (sizePerPage: number, currentPage: number, internalIDArray: number[]) => {
        if (currentPage > 2 && internalIDArray.length >= sizePerPage * (currentPage - 2)) {
            return internalIDArray[sizePerPage * (currentPage - 2) - 1];
        }
        return null;
    };


    const handlePageChangeWrapper = (searchQuery: any) => {
        return async (page: number, sizePerPage: number) => {
    
            if (page === 1) {
                PublishedDocument(page, sizePerPage, "", searchQuery);
            } else {
                try {
                    if (InternalID.length >= sizePerPage * (page - 2)) {
                        // Assuming GetPreviousID returns a promise that resolves to the previous ID
                        const prevID = fetchPreviousID(sizePerPage, page, InternalID);
    
                        if (prevID !== null) {
                            PublishedDocument(page, sizePerPage, prevID, searchQuery);
                        } else {
                            console.log("No previous ID available.");
                        }
                    } else {
                        console.log("Insufficient InternalID data.");
                    }
                } catch (error) {
                    console.log("Error fetching previous ID:", error);
                }
            }
        };
    };

   const pageSize = 10; // Number of items per page
    const IDCount = InternalID.length;
    
    //VineetCode-------------------------
    const pagination = paginationFactory({
        page: 1,
        sizePerPage: pageSize,
        lastPageText: ">>",
        firstPageText: "<<",
        nextPageText: ">",
        prePageText: "<",
        showTotal: true,
        totalSize: IDCount, // Provide the total size of your data
        onPageChange: handlePageChangeWrapper,
        // ... other properties ...
    });


    const getInternalId = async () => {
        try {
          const baseUrl = props.context.pageContext.web.absoluteUrl;
          const endpoint = `/_api/web/lists/getbytitle('TestPerformance')/items?`;
          const fetchItemIDs = async (url: string) => {
            try {
              const response = await props.context.spHttpClient.get(url, SPHttpClient.configurations.v1);
    
              if (response.ok) {
                const responseJSON = await response.json();
    
                if (responseJSON.value && Array.isArray(responseJSON.value)) {
                  const ids = responseJSON.value.map((item: { ID: any }) => item.ID);
                  setInternalID((prevIDs) => [...prevIDs, ...ids]);
    
                  const nextLink = responseJSON['@odata.nextLink'];
                  if (nextLink) {
                    await fetchItemIDs(nextLink);
                  }
                } else {
                  console.log('Invalid response structure:', responseJSON);
                  alert('Invalid response structure. Check the error in the browser console.');
                }
              } else {
                console.log(`Request failed with status ${response.status}`);
                alert('Something went wrong! Check the error in the browser console.');
              }
            } catch (error) {
              console.log(error);
            }
          };
    
          const initialUrl = `${baseUrl}${endpoint}&$top=4999`;
    
          await fetchItemIDs(initialUrl);
          setidCount(true);
          PublishedDocument(1, pageSize, '');
        } catch (error) {
          console.log(error);
        }
      };

 const PublishedDocument = async (
        pageNumber:any,
        pageSize:any,
        previousID:any,
        searchQuery = ""
      ) => {
        try {
       
          let url = `${props.context.pageContext.web.absoluteUrl}/_api/web/lists/getbytitle('TestPerformance')/items?$select=*&$top=${pageSize}`;
    
           if (searchQuery) {
            // Append $filter query parameter for searching
            url += `&$filter=substringof('${encodeURIComponent(
              searchQuery
            )}', DocumentName)`;
          }
    
          let response;
          if (previousID === "" || previousID === null || previousID < 0) {
            response = await props.context.spHttpClient.get(
              `${props.context.pageContext.web.absoluteUrl}/_api/web/lists/getbytitle('TestPerformance')/items?$select=*`,
              SPHttpClient.configurations.v1,
              {
                headers: {
                  Accept: "application/json;odata=nometadata",
                  "odata-version": "",
                },
              }
            );
          } else {
            if (searchQuery) {
              response = await props.context.spHttpClient.get(
                url,
                SPHttpClient.configurations.v1,
                {
                  headers: {
                    Accept: "application/json;odata=nometadata",
                    "odata-version": "",
                  },
                }
              );
            } else {
              response = await props.context.spHttpClient.get(
                `${props.context.pageContext.web.absoluteUrl}/_api/web/lists/getbytitle('TestPerformance')/items?$select=*&$top=${pageSize}&$skiptoken=Paged%3dTRUE%26p_ID%3d${previousID}`,
                SPHttpClient.configurations.v1,
                {
                  headers: {
                    Accept: "application/json;odata=nometadata",
                    "odata-version": "",
                  },
                }
              );
            }
          }
    
          if (response.ok) {
            const responseJSON = await response.json();
    
            const newData = responseJSON.value.map((item: { ID: any; RUID: any; OrignalID: any; OldTagId: any; DocID: any; DocumentName: any; DocumentType: any; Created: any; AuthorName: any; RevisionNo: any; DocName: any; EncodedAbsUrl: any; }) => ({
              ID: item.ID,
              GuidData: item.RUID,
              OrignalID: item.OrignalID,
              OLDTagID: item.OldTagId,
              DocumentID: item.DocID,
              DocumentName: item.DocumentName,
              DocumentType: item.DocumentType,
              SubmissionDate: item.Created,
              RequestedBy: item.AuthorName,
              Version: item.RevisionNo,
              PublishDocument: item.DocName,
              PublishDocument2: `${props.context.pageContext.web.absoluteUrl}/_layouts/download.aspx?SourceUrl=${item.EncodedAbsUrl}`,
            }));
    
            setPublishDocument(newData);
            // setPublishDocument2((prevFriends) =>:void [
            //   ...prevFriends,
            //   {
            //     downloadpath: `${props.context.pageContext.web.absoluteUrl}/_layouts/download.aspx?SourceUrl=${newData.PublishDocument2}`,
            //   },
            // ]);
          } else {
            const responseJSON = await response.json();
            console.log(responseJSON);
            alert("Something went wrong! Check the error in the browser console.");
          }
        } catch (error) {
          console.log(error);
        }
      };


   use Effect(() => {
    getInternalId();
           }, []);