Cannot read properties of undefined (reading ‘actives’) – multi sort

Good day guys. I am currently using ngx-mat-multi-sort. When I try to sort the error occurs which is Cannot read properties of undefined (reading ‘actives’)
at TableData.onSortEvent (table-data.ts:69:49).

Anyone has an idea what seems to be the problem ?. Is it timing issue ? that causes the sorting to fail ?. Thanks and highly appreciated.

#html code

  <table
                          mat-table
                          [dataSource]="closureListTable.dataSource"
                          matMultiSort
                          (matSortChange)="closureListTable.onSortEvent()"
                        >
                          <ng-container *ngFor="let column of displayedColumns" [matColumnDef]="column">
                       
                            <th mat-multi-sort-header="{{column}}" mat-header-cell *matHeaderCellDef>
                              {{ getColumnHeader(column) }}
                            </th>
                            <td mat-cell *matCellDef="let element">
                              <div class="td-value-name">
                                {{ getColumnValue(element, column) }}
                              </div>
                            </td>
                          </ng-container>

                          <tr
                            mat-header-row
                            *matHeaderRowDef="displayedColumns; sticky: true"
                          ></tr>
                          <tr
                            mat-row
                            *matRowDef="let row; columns: displayedColumns"
                          ></tr>
                        </table>

#ts code

 displayedColumns: string[] = [];

    closureListTable: TableData<IStoreClosureProgram>;
    this.closureListTable = new TableData<any>([]);

    ngOnInit(): void {
        // NOTE: do not initialze MatMultiSortTableDataSource here because `this.sort` may not be loaded yet
      }
    
      ngAfterViewInit(): void {
        this.selectedTab = this.selectedTab || 'FL';  // Set default tab if not already set
        this.displayedColumns = this.columnsMapping[this.selectedTab] || this.columnsMapping['FL'];
        setTimeout(() => {
          this.initTable();
          this.initSearch(); 
        }, 5000);
      }
      
      initSearch(): void {
        if (this.searchInput?.nativeElement) {
          fromEvent<any>(this.searchInput.nativeElement, 'keyup')
            .pipe(
              map((event) => event.target.value),
              startWith(''),
              debounceTime(500),
              distinctUntilChanged(),
              switchMap(async (search) => {
                this.closureListTable.pageIndex = 0;
                this.getData();
              })
            )
            .subscribe({ complete: noop });
        }
      }
    
      initTable() {
        this.closureListTable.dataSource = new MatMultiSortTableDataSource(
          this.sort,
          this.CLIENT_SIDE
        );
        this.closureListTable.nextObservable.subscribe(() => {
          this.getData();
        });
        this.closureListTable.sortObservable.subscribe(() => {
          console.log("1234")
          this.getData();
        });
        this.closureListTable.previousObservable.subscribe(() => {
          this.getData();
        });
        this.closureListTable.sizeObservable.subscribe(() => {
          this.getData();
        });
    
        if (
          (!!this.storeClosureAcessSettings?.ReceivingStoreList &&
            this.storeClosureAcessSettings?.ReceivingStoreList !== 'None') ||
          (!!this.storeClosureAcessSettings?.FullStoreClosureList &&
            this.storeClosureAcessSettings?.FullStoreClosureList !== 'None')
        ) {
          this.getData();
        }
    
        if (
          !!this.storeClosureAcessSettings?.AggregatesCounts &&
          this.storeClosureAcessSettings?.AggregatesCounts !== 'None'
        ) {
          // this.getAggregate();
        }
      }