I have a grid array of objects and it has default data from the database , now on the front end the data are being displayed on the table/grid and user can add row and delete row , when I add a row I only want to insert an empty object.

my issue is when I add a row duplicate ids are existing and when I delete only just a single row sometimes multiple rows are being deleted

What seem to be the issue of my implementation ? how do I delete and add rows without compromising the ids ? Thanks.

#grid data - from the database

gridTableData [
    {
        "id": 0,
        "demos": "21 Est. Pop",
    },
    {
        "id": 1,
        "demos": "Households",
    },
    {
        "id": 5,
        "demos": "Avg HH Inc",
    },
]

#add and delete row code

 deleteRow(id: number) {
    const filteredDemographics = this.gridTableData.filter(s => s.id !== id);
 this.gridTableData = [...filteredDemographics];

  }

  addRow() {
    this.gridTableData.push({id:this.gridTableData.length});
    console.log("this.gridTableData" , this.gridTableData)
  }

#html

  <tbody *ngIf="gridTableData.length > 0">
                <tr *ngFor="let row of gridTableData;let i = index" [ngClass]="{'row-is-editing':isRowEditing(i)}">
                    <td>
                        <button *ngIf="checkIfExistsOnDefaultGrid(row) === false" class="material-icons-outlined" mat-icon-button color="error"
                            (click)="deleteRow(row.id)">
                            <mat-icon>delete_outline</mat-icon>
                        </button>
                    </td>
                </tr>
            </tbody>