angular how to control all your addrows?

Question

guys I'm trying to create a Form Array once I clicked the modal, the mat-table will appear. and I will select a row, once I clicked the row it will pass to the other component but, when I add a row again it will get the value of the first row. The first row Data should be static, then I can click a row again without affecting the first row that has been selected.

DIALOG HTML

<mat-table [dataSource]="DataSource">
  
  <ng-container matColumnDef="Name">
    <mat-header-cell *matHeaderCellDef>ITEM CODE</mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.ItemCategory.Item}}</mat-cell>
  </ng-container>
 
  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
                <mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selectedRow(row)"></mat-row>
              </mat-table>

DIALOG TS

constructor(private micro:ItemSVCPropertyService, private dialogRef: MatDialogRef<ItemDialogComponent>,) 

     selectedRow(row){
        this.micro.ItemServices= (row) 
        this.dialogRef.close();
      }

COMPONTENT THAT NEED TO GET THE OBJECT ONCE I CLICK THE SELECTED ROW

.HTML

<form [formGroup]="Form">
<ng-container  formArrayName="ItemRec">
<table>
<thead>
<tr>
<th></th>
<th>ITEM</th>
</tr>
<tbody>
<tr  *ngFor="let ItemRec of ItemRec.controls; let i = index;" [formGroupName]="i">
<td>
<button mat-raised-button color="accent" (click)="openDialog()">
<mat-icon>search</mat-icon>
</button>   
</td>
<td> 
<input type="" style="width:200px" class="form-control"
formControlName="Item">   
</td>
</tr>
</tbody>
</thead>
</table>
</ng-container>
</form>

.TS

openDialog(){
this.dialog.open(ItemDialogComponent)
.afterClosed().subscribe(response => {
if(response === 'save'){
 }
});
}

addRow(): void {
      this.ItemRec.push(this.CreateItemRec());
    }

CreateItemRec(): FormGroup {
        return this.fb.group({
          id:[0],
          Item:['',Validators.required],
        })
        
    }

 this.Form = this.fb.group({
    Id:['0'],
    ItemRec: this.fb.array([this.CreateItemRec()])
  })
 }  

get ItemRec(): FormArray {
      return <FormArray>this.Form.get('ItemRec') as FormArray
    }


THIS CODE TO GET THE OBJECT OF THE OTHER COMPONENT USING SERVICES

get getList() {
      return this.micro.getList?.Item;
   }

.SERVICES

@Injectable({
  providedIn: 'root'
})
export class ItemServices {
  getList:myDTO;
}

similar problem

Getting the specified value from the FormArray in Angular 9