Выбор даты в угловом материале не отображается должным образом

Question

Здравствуйте, я создаю форму с помощью выбора даты в угловой материал.

Но когда я нажимаю на Выбор даты, календарь не появляется должным образом.

Вот снимок,

HTML это

<div class="mat-elevation-z8">
  <form [formGroup]="paymentFormGroup">
    <mat-form-field class="form">
      <input matInput formControlName="userId" placeholder="User Id">
    </mat-form-field>
    <mat-form-field class="form">
      <mat-select formControlName="paymentType" placeholder="Type">
        <mat-option *ngFor="let payment of paymentTypes" [value]="payment.value">
          {{payment.viewValue}}
        </mat-option>
      </mat-select>
    </mat-form-field>

    <mat-form-field class="form">
      <input matInput [matDatepicker]="from" formControlName="fromDate" placeholder="From">
      <mat-datepicker-toggle matSuffix [for]="from"></mat-datepicker-toggle>
      <mat-datepicker #from></mat-datepicker>
    </mat-form-field>

    <mat-form-field class="form">
      <input matInput [matDatepicker]="to" formControlName="toDate" placeholder="To">
      <mat-datepicker-toggle matSuffix [for]="to"></mat-datepicker-toggle>
      <mat-datepicker #to></mat-datepicker>
    </mat-form-field>
    <button class="form" mat-raised-button color="primary"> Submit </button>
  </form>
</div>

Пожалуйста, поправьте меня, где я не прав.

Всплывающий календарь должен быть виден чуть ниже поля формы.