Angular 7, dynamically assigning values to formarray controls

In angular 7 , I am trying to make editable form with some initial values. I created a formgroup which also has formarray. I am trying to dynamically assign values to formcontrols , within formarray but formcontrol values are not being displayed on form.

Here is my html,

<form [formGroup]="UserForm" (ngSubmit)="submit()" >
  <ng-container>
    <span>Group Name</span>
    <mat-form-field id="uName">
      <input matInput autocomplete="off" formControlName="GroupName">
    </mat-form-field>
  </ng-container>
  <br>
  <span>User Details</span>
  <br> 
  <div id="divUser"> 
      <table mat-table [dataSource]="UserData" class="mat-elevation-z8" formArrayName="UserRow">
          <ng-container matColumnDef="id">
              <th mat-header-cell *matHeaderCellDef> Id </th>
              <td mat-cell *matCellDef="let row; let index = index" [formGroupName]="index">
                  {{index + 1}}.
              </td>         
          </ng-container>

          <ng-container matColumnDef="username">
              <th mat-header-cell *matHeaderCellDef>Server Name</th>
              <td mat-cell *matCellDef="let row; let index = index" [formGroupName]="index">
                  <mat-form-field>
                    <input matInput formControlName="username" autocomplete="off">  // this is showing blank fields
                  </mat-form-field>  
              </td>         
          </ng-container>

          <tr mat-header-row *matHeaderRowDef="UserColumns"></tr>
          <tr mat-row *matRowDef="let row; columns: UserColumns;"></tr>
      </table>   
  </div> 
  <button mat-raised-button type="submit" color="primary">Submit</button>
</form>

And component code,

export class AdmissionComponent implements OnInit {
  public UserForm: FormGroup;
  public UserData;
  public UserColumns = ['id','username']  

  constructor(private formservice: AdmissionService,private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.getservicedata('FIRST')
    this.UserForm = this.formBuilder.group({
      GroupName: new FormControl(),     
      UserRow: this.formBuilder.array([this.CreateUser()])      
    });
  }

  onsetValue(result): void { 
    this.UserForm.controls['GroupName'].setValue(result.data[0].GroupName) // This is working and showing on html.      

    for (var key in result.data[0].usersRow) {
      if (key != '0'){ this.fnUserAdd(); }      
      // this.UserForm.value.UserRow[key].username = result.data[0].usersRow.username; // this is not working.
      this.UserForm.value.UserRow[key].username = 'testing'; // this is not wroking either
        };

        console.log(this.UserForm.value) // BUT this is perfactly showing data after setting up the values.
    }

    fnUserAdd(){
        (this.UserForm.get('UserRow') as FormArray).push(this.CreateUser());
        return this.getUserData();
    }
    getUserData(){
      this.UserData = this.UserForm.get('UserRow').value;
    }
    CreateUser(): FormGroup {
        return this.formBuilder.group({
          username: '',
          userrole: '',      
          present:''
        })
    }
    getservicedata(UserId){    
        return this.admiserv.getDetails(UserId)
        .subscribe(
          result => {
            this.onsetValue(result)         
          });
    }
  submit(){
    console.log(this.UserForm.value)
  }
}

It shows blank input fields on html and when i put some values and click submit, it works and sends the values to function but not showing initial values in input fields.

Please suggest how to resolve this error.

Thanks