фильтр с двумя матами не работает на одном компоненте в angular 8

Question

, когда я пытаюсь реализовать две таблицы матов на одном компоненте со всеми функциями, такими как фильтр, разбиение на страницы и сортировка. но во 2-м мате фильтр таблицы не работает. Вот мой. html код

     <mat-form-field>
            <input matInput (keyup)="applyFilterOne($event.target.value)" placeholder="Filter"  />
      </mat-form-field>
     <table mat-table matSort [dataSource]="dataSourceOne" #TableOneSort="matSort"class="mat-elevation-z8" style="width: 100%;" >      
          </table>     
          <mat-paginator
            #TableOnePaginator="matPaginator"
            [pageSize]="3"
            [pageSizeOptions]="[5, 10, 25, 100]"
          ></mat-paginator>

          <mat-form-field>
            <input
              matInput
              (keyup)="applyFilterTwo($event.target.value)"
              placeholder="Filter"
            />
          </mat-form-field>
          <table
            mat-table
            matSort
            [dataSource]="dataSourceTwo"
            #TableTwoSort="matSort"
            class="mat-elevation-z8"
            style="width: 100%;"
          >

          </table>

          <mat-paginator
            #TableTwoPaginator="matPaginator"
            [pageSize]="3"
            [pageSizeOptions]="[5, 10, 25, 100]"
          ></mat-paginator>
        </div>

Вот .ts файл с кодом

       ngOnInit() {
        this.dataSourceOne.paginator = this.tableOnePaginator;
        this.dataSourceOne.sort = this.tableOneSort;     
        this.dataSourceTwo.paginator = this.tableTwoPaginator;
        this.dataSourceTwo.sort = this.tableTwoSort;

        this._orderDetailsServices.getOrderDetails().subscribe(r =>{console.log(r);
          this.users = r.orderItemsResponces;
          this.dataSourceOne = new MatTableDataSource(this.users);
          this.dataSourceOne.paginator = this.tableOnePaginator;
          this.dataSourceOne.sort = this.tableOneSort;
        });

        this._orderDetailsServices.getAllOrderUserDetails().subscribe(r =>{console.log(r);
          this.orderitem=r.orderResponces;  
          this.dataSourceTwo = new MatTableDataSource(this.orderitem);
          this.dataSourceTwo.paginator = this.tableTwoPaginator;
          this.dataSourceTwo.sort = this.tableTwoSort;         
        });
      }

      applyFilterOne(filterValue: string) {
        this.dataSourceOne.filter = filterValue.trim().toLowerCase();
      }

      applyFilterTwo(filterValue: string) {
        this.dataSourceTwo.filter = filterValue.trim().toLowerCase();
      }

Здесь оба кода файла. один -. html, а другой - код файла .ts. я использую таблицу матов для отображения данных данных Web.api в angular 8.