Angular Form Delay in getting variable

I'm creating an angular component for a currency drop down to be used within various other components.

I am having an issue though in that I set the form's value to the current user's currency (taken from the db) which is causing a delay of such as the drop down seems to be created before this value is returned, meaning it isn't until the drop down is clicked that the value becomes their current value.

The component's html looks like this:

<div class="currency-select">
  <mat-form-field>
    <mat-select [formControl]="currencyForm" (openedChange)="selectSearch.focus()" placeholder="Currency:">
      <aemat-select-search (search)="filterCurrencyOptions($event)" #selectSearch (keydown)="$event.stopPropagation()">
      </aemat-select-search>
      <mat-option *ngFor="let currency of filteredCurrencies" [value]="currency.counter_currency_code" (click)="updateCurrency()">
          <flag-icon country="{{ (currency.counter_currency_iso_2 || '').toLowerCase() }}"></flag-icon>  {{currency.counter_currency_code}}
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>

and the relevant areas of the component looks like this:

@Component({
    selector: 'app-currency-selector',
    templateUrl: './currency-selector.component.html',
    styleUrls: ['./currency-selector.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush
})

export class CurrencySelectorComponent implements OnInit {
    currencies: Array<CurrencyInterface>;
    filteredCurrencies: Array<CurrencyInterface>;
    currencyForm = new FormControl();
    currentCurrency: string;

ngOnInit() {
        this.getCurrencies()
            .subscribe(data => {
                this.currencies = data;
                this.currencies.push(this.usdOption);
                this.currencies = this._sortRemoveDupes(this.currencies, 'counter_currency_code', 'counter_currency_code');
                this.filteredCurrencies = this.currencies;
            });

        this.getCurrentCurrency()
        .subscribe(data => {
            this.currentCurrency = data[0].currency;
            this.currencyForm.setValue(this.currentCurrency);
        })

    }

getCurrencies(): Observable<Array<CurrencyInterface>> {
        return this.httpClient.get<Array<CurrencyInterface>>(`${this.backendService.url}/currency_rates_view`).pipe(
            catchError(error => {
                this.backendService.handleError(error);
                return of([]);
            })
        ).pipe(shareReplay(1));
    }

getCurrentCurrency(): Observable<Array<UserView>> {
        return this.httpClient.get<Array<UserView>>(`${this.backendService.url}/users_view?id=eq.${this.backendService.userId}`)
        .pipe(
            catchError(error => {
                this.backendService.handleError(error);
                return of([]);
            })
        ).pipe(shareReplay(1));
    }

And thhen the component is simply called from other components as such:

<app-currency-selector></app-currency-selector>

With the above code, when I load the other component, I can see a drop down with a placeholder that says 'Currency:'

When I click on it once, instead of dropping down, the placeholder becomes superscript above the currency_code for the user's database currency value.

Then, I click on the dropdown again and the dropdown then works (although it is still glitchy due to the search bar but that is another issue!)

Is there a way I can have the user's currency selected on loading of the other component as opposed to having to click the dropdown for it to appear?