When server side sorting a column in ag-grid it start request from first page

In my grid using infinite scroll i have reached on startRow: 400 and endRow: 450 and now when i sort the column in that case it should keep my position on the grid to my earlier block but in my implementation it takes me back to startRow:0, endRow:50 not sure what's wrong i'm doing here:--

Pagination works fine issue with only when i apply a Sorting model.

This is a method in my angular component class to create a data source. I'm merging my other parameters with aggrid's params.request to call the API:--

createDatasource(data: ActiveFiltersWithParams): Observable<IServerSideDatasource> {
    const dataSource: IServerSideDatasource = {
      // called by the grid when more rows are required
      getRows: (params: IServerSideGetRowsParams) => {
        data.startRow = params.request.startRow + 1;
        data.endRow = params.request.endRow;
        data.sortModel = params.request.sortModel;
        var response = this.getGridData(data);
        response
          .pipe(takeUntil(this.unsubscribe$))
          .subscribe(data => {
            const immutableData: FundDetail = JSON.parse(JSON.stringify(data));
            setTimeout(() => {
              let lastRow = -1;
              if (immutableData.totalRows <= params.request.endRow) {
                lastRow = immutableData.totalRows;
              }
              if (immutableData.rows.length === 0) {
                this.gridOptions.api.showNoRowsOverlay()
              }
              params.successCallback(immutableData.rows, lastRow);
            }), 500
          }, (err) => {
            params.failCallback();
            this.toastrService.error(err);
          });
      }
    };
    if (this.gridApi)
      this.gridApi.setServerSideDatasource(dataSource);
    return Observable.of(dataSource);
  }

here I'm calling my createDataSouce function:--

this.etpScreenerService.activeFiltersForGridObs$
      .pipe(switchMap((data) => {
        if (data && Object.keys(data).length) {
          if (this.gridOptions && this.gridOptions.api)
            this.gridOptions.api.hideOverlay();
          return this.createDatasource(data);
        } else {
          return Observable.empty();
        }
      }), takeUntil(this.unsubscribe$))
      .subscribe((data) => {

      }, err => {
        this.toastrService.error(err);
      });

this is GridOptions object:--

gridOptions: GridOptions = {
    // pagination: true,
    rowModelType: 'serverSide',
    cacheBlockSize: 20,
    columnDefs: this.createColumnDefs(),
    components: {
      loadingCellRenderer: (params: any) => {
        if (params.value !== undefined) {
          return params.value;
        } else {
          return `<i class="fa fa-spinner fa-pulse fa-fw"></i><span>Loading...</span>`;
        }
      }
    },

  };

And in my template i'm using few options like this:--

<ag-grid-angular style="height: calc(100vh - 160px);" class="ag-theme-balham" [animateRows]="true"
            [enableServerSideSorting]="true" [overlayLoadingTemplate]="overlayLoadingTemplate" [overlayNoRowsTemplate]="overlayNoRowsTemplate" [enableColResize]="true" [gridOptions]="gridOptions"
            (gridReady)="onGridReady($event)"></ag-grid-angular>