Filtering and pagination is not working with ngxpagination template

I have a custom pagination template implementation of ngx-pagination which works normally. However when I try to use a filter pipe with the pagination, the pagination breaks: the pagination controls remain the same as before the filter was applied, and the filtered data-set is not longer paginated (11 items appearing on screen instead of 10). The pagination controls are still visible at the bottom of the page when filtered, but do not affect the filtered data i.e. no page change.

Component HTML

<task-manager-record *ngFor="let record of filteredDraftRecords | draftFilter: draftFilterArg | paginate: getPaginationOptions(tabIndex); let i = index;" [record]="record"></oir-task-manager-record>
<div class="totalRecords">
    <label>Total </label>
    
</div>
<pagination *ngIf="(filteredDraftRecords | draftFilter:draftFilterArg)?.length > getPaginationOptions(tabIndex).itemsPerPage"
          (pageChange)="onChangePage($event)"
          [options]="getPaginationOptions(tabIndex)">
</pagination>

Component ts

import { Component, OnInit } from '@angular/core';
import { RecordViewModel } from '../models/app.models';
import { MotionStatus } from '../models/enum.model';
import { PaginationOptions } from 'proceduralsystem-clientcomponents';
import { SelectItem } from '@motions/motions.model';
import { TaskManagerService } from './task-manager.service';

@Component({
  selector: 'task-manager',
  templateUrl: './task-manager.component.html',
  styleUrls: ['./task-manager.component.less']
})
export class TaskManagerComponent implements OnInit {

  draftrecords = new Array<RecordViewModel>();
  filteredDraftRecords = new Array<RecordViewModel>();

  motionStatus = MotionStatus;
  draftFilterArg = 0;
  tabIndex = 0;
  page: { [id: string]: number} = {};
  currentPage = 1;

  constructor(
    public taskManagerService: TaskManagerService
  ) {
  }

  ngOnInit(): void {
    this.loadDraftRecords();
  }

  loadDraftRecords(): void {
    this.taskManagerService.getDraftMotions().subscribe(m => {
    this.draftRecords = m.Records;
      this.filteredDraftRecords = this.draftRecords;
    });
  }


  // Pagination functions
  getPaginationOptions(tabIndex: number): PaginationOptions {
    const paginationId = `tab${tabIndex}`;

    return {
      id: 'tab',
      itemsPerPage: 10,
      currentPage: this.page[paginationId],
      totalItems: this.draftRecords.length
    };
  }

  onChangePage(pageNumber) {
    this.page[`tab${this.tabIndex}`] = pageNumber;
  }

}

Filter Pipe import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'draftFilter'
})
export class DraftFilterPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    if(args) {
      return value.filter(item => item.status.id === args);
    } else {
      return value;
    }
  }
}

Edit: Added demo. The code is a little different, refactored to remove unneeded code. https://stackblitz.com/edit/angular-fnbnaw

from Filtering and pagination is not working with ngxpagination template