Angular mat-select de, herhangi bir elemanı seçili nasıl getirebilirim, sayfa yüklenince ?

aşağıda bir mat-select componentinde, bir meyvenin seçili olarak gelmesinin örneği var, en altta çalışan uygulama örneği linki mevcut

typescript tarafı:

import { Component , ViewChild} from '@angular/core';
import { FormBuilder, FormGroup,FormControl,Validators } from '@angular/forms';

/**
 * @title Basic table
 */
@Component({
  selector: 'table-basic-example',
  styleUrls: ['table-basic-example.css'],
  templateUrl: 'table-basic-example.html',
})
export class TableBasicExample {
  frmMeyveler: FormGroup;

  meyveler=[{
    id:1,
    name:'Elma'
  },{
    id:2,
    name:'Armut'
  },{
    id:3,
    name:'Kiraz'
  }]

  constructor(private fb: FormBuilder){}

  ngOnInit() {

    this.frmMeyveler = this.fb.group({
      meyveMatSelect: [null, Validators.required]
    });

    const toSelect = this.meyveler.find(c => c.id == 3);
      this.frmMeyveler.get('meyveMatSelect').setValue(toSelect);
  }
}

html tarafı:

<form [formGroup]="frmMeyveler">
<mat-form-field class="full-width">
  <mat-select placeholder="Meyveler" formControlName="meyveMatSelect">
    <mat-option>--</mat-option>
    <mat-option *ngFor="let category of meyveler" [value]="category">
      {{category.name}} - {{category.description}}
    </mat-option>
  </mat-select>
</mat-form-field>

<p>{{frmMeyveler.get('meyveMatSelect').value | json}}</p>
</form>

Örneği buradan inceleyebilirsiniz

https://stackblitz.com/edit/how-to-set-default-value-of-mat-select-when-options-are-5axtba?file=app%2Ftable-basic-example.ts