Estoy usando react-data-table-component, los datos se obtendrán de una API (que tiene más de 10k registros).

 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();

// Tabla de datos

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

En este momento, esta función funciona bien, el problema es que la API tiene más de 10k registros, la página se carga hasta que finaliza el ciclo while.

En lugar de esto, quería cargar solo los primeros 30 o 50 y luego, en la siguiente paginación, me gustaría cargar la siguiente respuesta.

¿Cómo se puede hacer esto?