Expected behavior Sidenav loads without error

Actual behavior After updating mdb from 10.x to 11.x this error accurs. Angular got updated also to 11.x via ng update.

Resources (screenshots, code snippets etc.)

Cannot read properties of undefined (reading 'nativeElement')

 set side(position) {
    if (position === 'left') {
        this._sidenavTransform = 'translateX(-100%)';
        this.renderer.removeClass(this.sideNav.nativeElement, 'side-nav-right');
    }
    else {
        this._sidenavTransform = 'translateX(100%)';
        this.renderer.addClass(this.sideNav.nativeElement, 'side-nav-right'); //points to this line here
    }
    this._side = position;
}

My Implementation:

  <mdb-side-nav #sidenav class="fixed d-md-none my-navigation-sidebar" [fixed]="true" side="right">
        <!-- Logo -->
        <li>
            <div class="logo-wrapper waves-light">
                <a href="#"><img src="/assets/logo.png" class="img-fluid flex-center m-auto" style="max-height: 100%" /></a>
            </div>
        </li>
</mdb-side-nav>