Expected behavior Iterating to creating sidenav shouldnt produce an error when clicking on an item.

Actual behavior Clicking on the sidenav items produces an error if they are created with ngFor.

Resources (screenshots, code snippets etc.)

<mdb-sidenav-layout>
<mdb-sidenav #sidenav="mdbSidenav">
    <ul class="sidenav-menu">
        <mdb-sidenav-item>
            <a class="sidenav-link"><i class="far fa-smile fa-fw me-3"></i><span>Link 1</span></a>
        </mdb-sidenav-item>
        <mdb-sidenav-item *ngFor="let category of categories">
            <a class="sidenav-link">
                <i class="fas fa-grin fa-fw me-3"></i>
                <span>{{category.name}}</span>
            </a>
            <ul class="sidenav-collapse" mdbCollapse>
                <li class="sidenav-item" *ngFor="let command of category.commands">
                    <a class="sidenav-link" (click)="onClickCommand(command.route)">{{command.name}}</a>
                </li>
            </ul>
        </mdb-sidenav-item>
    </ul>
</mdb-sidenav>
<mdb-sidenav-content #sidenavContent>
    <!-- Toggler -->
    <button #sidenavToggle class="btn btn-primary" (click)="sidenav.toggle()">
        <i class="fas fa-bars"></i>
    </button>
    <!-- Toggler -->
</mdb-sidenav-content>

core.js:6479 ERROR TypeError: child.querySelector is not a function
at mdb-angular-ui-kit-sidenav.js:908
at NodeList.forEach (<anonymous>)
at MdbSidenavItemComponent.setActiveElement (mdb-angular-ui-kit-sidenav.js:903)
at SafeSubscriber._next (mdb-angular-ui-kit-sidenav.js:858)
at SafeSubscriber.__tryOrUnsub (Subscriber.js:183)
at SafeSubscriber.next (Subscriber.js:122)
at Subscriber._next (Subscriber.js:72)
at Subscriber.next (Subscriber.js:49)
at TakeUntilSubscriber._next (Subscriber.js:72)
at TakeUntilSubscriber.next (Subscriber.js:49)

If I do not use ngFor I get no error, but as soon as I try to iterate over a list of objects to generate my sidenav, this is what I get.