Angular mat-calendar прерывается при добавлении пользовательского заголовка

Question

Попытка добавить пользовательский заголовок в mat-calendar, но стилизация нарушается, когда это происходит. Если бы кто-то мог попытаться помочь мне, это было бы оценено.

<div class="top">
    <div class="dates">
        <span>Start</span> 
        <mat-icon>arrow_right</mat-icon>
        <span >Eind</span>
    </div>
    <span class="dagenGeselecteerd">Geselecteerde dagen</span>
</div>
<mat-divider ></mat-divider>
<mat-dialog-content>
        
        <mat-calendar ></mat-calendar>
        <mat-divider [vertical]="true"></mat-divider>
        <mat-calendar [headerComponent]="customHeader"></mat-calendar>
</mat-dialog-content>
<mat-divider ></mat-divider>
<mat-dialog-actions align="end">
    <button class="mat-raised-button"(click)="close()">Close</button>
    <button class="mat-raised-button mat-primary"(click)="save()">Save</button>
</mat-dialog-actions>

<div class="wrapper">
    <button mat-icon-button (click)="previousClicked('month')">
        <mat-icon>keyboard_arrow_left</mat-icon>
    </button>
    <span>{{periodLabel}}</span>
    <button mat-icon-button (click)="nextClicked('month')">
        <mat-icon>keyboard_arrow_right</mat-icon>
    </button>
</div>