Expected behavior

The list is populated with an array of objects.

      <mdb-select  
          (valueChange)="onMonthClick($event)" 
          >
            <mdb-option *ngFor="let yearMonth of yearMonths"  [value]="[yearMonth.Date]">
              {{yearMonth.Date | date:'MMM yyyy' }} 
              <span *ngIf="includecount">({{ yearMonth.DocumentCount }} )</span>
            </mdb-option>
          </mdb-select>

I would like to, on load, effectively click the first item in the list and fire the valueChange event.

Actual behavior

I can achieve this with

this.onMonthClick(this.yearMonths[0].Date);

My difficulty is that the selection is not displayed.

Resources (screenshots, code snippets etc.)

This is the result.

This is what I want to achieve

I have tried setting selectedValue as per docs without success.

Define selectedValue

    selectedValue = new FormControl();

HTML

      <mdb-select  [formControl]="selectedValue"
          (valueChange)="onMonthClick($event)" 
      >

And when the data is loaded for the select:

 this.selectedValue = new FormControl(this.yearMonths[0].Date);