Syncfusion Data grid React pagination is not working

I used syncfusion's React Data Grid in my application. Using the API, it carried the data and showed the data in the DataGrid table. But pagination in the datagrid is not working. Normally it works fine, When I integrate the code, it doesn't work.

import * as React from 'react';
import { DataManager, UrlAdaptor } from '@syncfusion/ej2-data';
import { GridComponent, ColumnsDirective, ColumnDirective, Edit, Toolbar, ColumnChooser, Page, Inject, Filter, Sort, Resize, Reorder  } from '@syncfusion/ej2-react-grids';

import '/resources/App.css';
import 'bootstrap/dist/css/bootstrap.css';


function Grid() {
  const editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' };
  const toolbarOptions = ['Add', 'Edit', 'Delete', 'Update', 'Cancel', 'ColumnChooser'];
  const editparams = { params: { popupHeight: '300px' } };
  const validationRule = { required: true };
  const orderidRules = { required: true, number: true };
  const pageSettings = { pageSize: 20, pageSizes: true};


  const dataManager = new DataManager({
    adaptor: new UrlAdaptor,
    insertUrl: "/api/insert",
    removeUrl: "/api/delete",
    updateUrl: "/api/update",
    url: "/api/json"
  });
  return <GridComponent dataSource={dataManager} 
          editSettings={editSettings} 
          toolbar={toolbarOptions} 
          filterSettings={{ type: 'Menu'}}
          pageSettings={pageSettings} allowPaging={true} 
          showColumnChooser={true} allowFiltering={true} allowSorting={true} 
          height={500}>
    <ColumnsDirective>
      <ColumnDirective field='id' headerText='Lead Id' width='100' textAlign="Center" isPrimaryKey={true} ></ColumnDirective>
      <ColumnDirective field='connector_id' headerText='Id Connector' />    
      <ColumnDirective field='first_name' headerText='First Name' editType='textedit' ></ColumnDirective>     
    </ColumnsDirective>
    <Inject services={[Page, Edit, Toolbar, ColumnChooser, Filter, Sort, Resize, Reorder]} />
  </GridComponent>
};
export default Grid;

When using the dataSource as DataManager instance with UrlAdaptor and performing actions like Paging, Filtering, Sorting, etc., they need to be handled on the server side. Based on the code you've shared, Paging appears to be properly enabled. It seems that the issue you are facing is related to not handling the API request for Paging correctly. When performing Paging with the URL adaptor, the query is generated with "skip" and "take" parameters. You need to process and resolve this query on the server side and return the appropriate data to be displayed on the Grid to the client side. You can find a sample based on your code snippet with the demo UrlAdaptor API from Syncfusion below:

Sample: https://stackblitz.com/edit/react-grid-urladaptor-with-paging

You can observe the requests sent to the API while performing Grid actions (including Paging) in the Developer Console Network Tab:

While performing Paging action: