Why DataSource not sorting

Question

I have two tables. My problem is not work sort dataSource1 why??

Code

export interface Elementa {
  id: number;
  akronim: string;
  imie: string;
  nazwisko: string;
}
export interface Elementb {
  name: string;
  position: number;
  weight: number;
  symbol: string;
}
ELEMENTB_DATA:Elementa[]=[
{id:1,akronim :'bb', imie:'kowalski',nazwisko:'bbb'},
{id:2,akronim :'a', imie:'akowalski',nazwisko:'babb'},
]
displayedColumns2 = ['id', 'akronim', 'imie', 'nazwisko'];
dataSource1 = new MatTableDataSource(this.ELEMENTB_DATA);

ELEMENT_DATAA: Elementb[] = [
  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
];

displayedColumns3 = ['position', 'name', 'weight', 'symbol'];
  dataSource3 = new MatTableDataSource(this.ELEMENT_DATAA);

@ViewChild(MatSort) set matSort(sort: MatSort){
    this.dataSource1.sort = sort;
    this.dataSource3.sort = sort;
  };

my code and variable definition interface. I have made both data sources look similar

HTML

<div class="example-container mat-elevation-z8">
  <mat-table #table [dataSource]="dataSource3" matSort>

    <!-- Position Column -->
    <ng-container matColumnDef="position">
      <mat-header-cell *matHeaderCellDef mat-sort-header> No. </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
    </ng-container>

    <!-- Weight Column -->
    <ng-container matColumnDef="weight">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Weight </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>
    </ng-container>

    <!-- Symbol Column -->
    <ng-container matColumnDef="symbol">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Symbol </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns3"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns3;"></mat-row>
  </mat-table>
  



    <mat-table #table [dataSource]="dataSource1" matSort>

      <ng-container matColumnDef="id">
        <mat-header-cell *matHeaderCellDef mat-sort-header> id </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.id}} </mat-cell>
      </ng-container>
      <!-- Position Column -->
      <ng-container matColumnDef="akronim">
        <mat-header-cell *matHeaderCellDef mat-sort-header> akronim </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.akronim}} </mat-cell>
      </ng-container>

      <!-- Name Column -->
      <ng-container matColumnDef="nazwisko">
        <mat-header-cell *matHeaderCellDef mat-sort-header> nazwisko </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.nazwisko}} </mat-cell>
      </ng-container>

      <!-- Weight Column -->
      <ng-container matColumnDef="imie">
        <mat-header-cell *matHeaderCellDef mat-sort-header> imie </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.imie}} </mat-cell>
      </ng-container>


      <mat-header-row *matHeaderRowDef="displayedColumns2"></mat-header-row>
      <mat-row *matRowDef="let row; columns: displayedColumns2;" ></mat-row>
    </mat-table>
   
  </div>

I don't understand why dataSource can be sorted and dataSorce1 doesn't work, The names of the data types are the same as the names of the columns,