I am using react-data-table-component the data will be fetched from a API (which has 10k+ records).

async function getAllData() {
  let nextUrl = "/url/";
  let temp = [];
  let config = {
    headers: {
        Authorization: `token`,
    },
  };
  while (nextUrl !== null) {
    const response = await apiInstance.get(nextUrl, config);
    nextUrl = response.data.next;
    temp.push(...response.data.results);
  }
  return temp;
}

async function tempFunc() {
  let temp1 = await getAllData();
  setDataFromAPI(temp1); // useState
}

tempFunc();

// DataTable

<DataTable
    pagination
    columns={columns}
    data={dataFromAPI}
    customStyles={customStyles}
/>

Right now this function works fine, the problem is the api has 10k+ records, the page is loading until it finishes the while loop.

Instead of this, i wanted to load only the first 30 or 50 then onnext pagination i would like to load the next response.

How can this be done ?