the options are not showing or being selected in mat-select

I want to preselect some options inside mat-select field in my Angular Form, so I have this code in typescript file:

selectedApps = [];
ngOnInit() {
    const url = this.baseUrl + `/projects/${this.id}`;
    this.httpClient.get(url).subscribe((data: Array<any>) => {
        for (let i=0; i<data['results'][0]['apps'].length; i++) {
            this.selectedApps.push(data['results'][0]['apps'][i]['name']);    
        }
        
    });
}

Here is the mat-select input fild:

<div class="col-sm-8 float-left">
  <mat-form-field>
    <mat-select [(value)]="selectedApps" placeholder="Select the associated applications ..." multiple (click)="getAppList();">
      <mat-option *ngFor="let app of appsList?.results" [value]="app.id">
        {{app.name }}
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>

My problem is that the value of selectedApps does not show inside the field, even that the values are properly pushed inside the array. why is that?

You are "preselecting" names

this.selectedApps.push(data['results'][0]['apps'][i]['name']);  

while your options contains ids

<mat-option
          *ngFor="let app of appsList?.results" [value]="app.id">{{app.name
        }}</mat-option>

In order to get it work, selectedApps mush keep the same values that are available on mat-option [value] property. After all, this is what will be the actual mat-select value.

To be honest, I would make whole app as a value as there is no reason to threat it orherwise. It would simplify much of code.