Angular ngZorro: [(ngModel)] does not pre set <select> tag value

I'm currently working on a front end solution that is built with Angular 6 and the framework Ng-Zorro 7.5

I have some list of reasons that I succesfully display as the code below, where reasonList is a array of the type Reason

export class Reason{
  id: number;
  name: string;
}

Reasons.component.html

 <div nz-col nzSpan="11">
  <nz-form-item>
    <nz-form-label [nzSm]="10" [nzXs]="24">
      Reason
    </nz-form-label>
    <nz-form-control [nzSm]="14" [nzXs]="24">
      <nz-select formControlName="reasonSelectControl" 
      (ngModelChange)="getSelectedReason($event)" nzPlaceHolder="select from list" [(ngModel)]="selectedReason">
        <nz-option *ngFor="let reason of reasonList" nzLabel="{{reason.name}}" nzValue="{{reason.id}}">
        </nz-option>
      </nz-select>
    </nz-form-control>
  </nz-form-item>
</div>

I can display the whole list of reasonList, select a value and get the id, so far so good. Now, when I want to the option to be pre-set on my Reasons.component.ts with a value dynamically generated on my OnInit I can't display the value, it keep showing a blank space as follow:

I tried with every possible value for my selectedReason: a string with the Id of a Reason, a number with Id of a Reason, the whole complex object and the do a selectedReason.id in my reasons.component.html, but nothing works. Can you guys pleas help me?

If you have a form = new FormGroup( ... ) that contains your reasonSelectControl you can use this on OnInit

this.form.get('reasonSelectControl').setValue(this.reasonList[0].name);

I usually use the first element in the array.