angular material multiple table with one datasource

I have a template containing two angular material datatable both using the same datasource. Any change to one datatable affects the other datatable as well. how do I avoid it?

<div>
  <table mat-table [dataSource] = "dataSource" matSort class="mat-elevation-z8" >
  <!-- ID Column -->
  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
    <td mat-cell *matCellDef="let element">{{element.Id}} </td>
  </ng-container>

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

    <ng-container matColumnDef="city">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> City </th>
    <td mat-cell *matCellDef="let element">{{element.city}} </td>
  </ng-container>

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

  </table>
    <mat-paginator 
      [pageSize]="pageSize"
      showFirstLastButtons>
    </mat-paginator>

  </div>
<br>
<div>
<div class="row">
  <div class="col-xl-12 mb-30">
    <div class="card card-statistics h-100 mb-30">
      <div class="card-body">
        <form [formGroup]="form" (ngSubmit)="onSearch()"> 
          <!-- Row 1 begins -->
          <div class="form-row">
            <div class="col-md-3 mb-3">
                <label>id </label>
                <input type="text" class="form-control" formControlName="id" >
            </div>
            <div class="col-md-3 mb-3">
                <label>Name</label>
                <input type="text" class="form-control" formControlName="name">
            </div>
            <div class="col-md-3 mb-3">
                <label>City</label>
                <input type="text" class="form-control" formControlName="city" >
            </div>

          </div>

          <div class="form-row">
            <div class="col-md-12 text-right mt-3">
              <button type="submit" class="btn btn-primary" >Search</button>

            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<div>
  <table mat-table [dataSource] = "dataSource" matSort class="mat-elevation-z8" >

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

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

    <ng-container matColumnDef="city">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> City </th>
    <td mat-cell *matCellDef="let element">{{element.city}} </td>
  </ng-container>



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

</table>
  <mat-paginator 
    [pageSize]="pageSize"
    showFirstLastButtons>
  </mat-paginator>

</div> 
</div>

My component class has a datasource and displayedcolumns which is used by both the data table.

Question: The issue I am facing is if I change anything within data table 1 , it also affects data table 2. How do I make changes in one data table not affect the other one?

 dataSource = new MatTableDataSource();
  displayedColumns = ['id', 'name', 'city'];