Mat Table Datasource showing inconsistent behavior while adding data to it

Question

I am using a Mat table data source variable to store data like an array .

demoDataSource: MatTableDataSource<any> = new MatTableDataSource<any>();

I am setting the value of it at some event call by -

this.Service.getDetails(Number(Id))
  .subscribe((res) => {    
    this.demoDataSource.data[Id] = res;
  });

It successfully sets the data at Id position -

But the problem is arising when i am trying to add another record for some other id , it adds at the previous location also , and at the new location as well .

The new ID has 3 records so it adds to that ID -

But it adds to the old location as well turning the size to 8 -

There is no where code to assign to the ID place apart from the above code , why is this happening ? Does anyone have any idea ?

TIA