Broken mat-list-item animation

[zinc ridge]

    <mat-sidenav #drawer class="sidenav" fixedInViewport
                 [attr.role]="'navigation'"
                 [mode]="'side'"
                 [opened]="true">
        <mat-toolbar>
            <button
                    type="button"
                    aria-label="Toggle sidenav"
                    mat-icon-button
                    (click)="drawer.toggle()">
                <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
            </button>
            <img ngSrc="assets/mindglow_logo.svg" width= "1000" draggable="false" priority="5" height="400" class="logo">
        </mat-toolbar>
        <mat-nav-list>
            <mat-list-item>
                <mat-icon matListItemIcon>home</mat-icon>
                <a class="title" routerLink="/home" style="text-decoration: none">Home</a>
                <span matListItemMeta>100+</span>
            </mat-list-item>
        </mat-nav-list>
    </mat-sidenav>
    <mat-sidenav-content>
        <mat-toolbar color="primary">
        </mat-toolbar>
        <!-- Add Content Here -->
    </mat-sidenav-content>
</mat-sidenav-container>

@use '@angular/material' as mat;

.sidenav-container {
    height: 100%;
}

.sidenav {
    width: 360px;
}

.sidenav .mat-toolbar {
    background: inherit;
}

.mat-toolbar.mat-primary {
    position: sticky;
    top: 0;
    z-index: 1;
}

.logo {
    display: block;
    height: 100%;
    width: auto;
}

@mixin color($theme) {
    .title {
        color: mat.get-theme-color($theme, on-surface-variant)
    }
}

@mixin typography($theme) {
    .title {
        font: mat.get-theme-typography($theme, label-large, font);
    }
}

@mixin theme($theme) {
    @if mat.theme-has($theme, color) {
        @include color($theme);
    }
    @if mat.theme-has($theme, typography) {
        @include typography($theme);
    }
}

[zinc ridge]

Broken mat-list-item animation