core.mjs:7739 ERROR TypeError: Cannot read properties of undefined (reading 'querySelector')

Question

In the package.json we have the below dependencies

"@syncfusion/ej2-angular-buttons": "19.4.55",
"@syncfusion/ej2-angular-calendars": "19.4.56",
"@syncfusion/ej2-angular-dropdowns": "19.4.56",
"@syncfusion/ej2-angular-grids": "19.4.56",
"@syncfusion/ej2-angular-inputs": "19.4.52",
"@syncfusion/ej2-angular-lists": "19.4.55",
"@syncfusion/ej2-angular-navigations": "19.4.56",
"@syncfusion/ej2-angular-popups": "19.4.53",
"@syncfusion/ej2-angular-richtexteditor": "19.4.56",
"@syncfusion/ej2-angular-schedule": "19.4.55",
"@syncfusion/ej2-base": "19.4.52",

In the angular html I have the below code

<button #menuTriggerStatus="matMenuTrigger" [matMenuTriggerFor]="menustatus" mat-button class="e-btn e-btn--primary e-btn--squared" [disabled]="isLockedTemplateForClients()">
  Status

  <mat-icon *ngIf="!isLockedTemplateForClients()">
    {{menuTriggerStatus.menuOpen ? 'expand_less' : 'expand_more'}}
  </mat-icon>
</button>

<mat-menu #menustatus="matMenu">
  <ng-container *ngIf="!isCreatedFromLockedTemplate()">

    <button mat-menu-item (click)="onStatusChange(1)">{{l('DraftLowerCase')}}</button>
    <button mat-menu-item (click)="onStatusChange(2)"> {{l('Approve')}}</button>
    <button mat-menu-item (click)="onStatusChange(3)">  {{l('Publish')}}</button>

</mat-menu>

The module is imported as below

@NgModule({
    declarations: [
        
    ],
    providers: [
       
    ],
    imports: [
        SharedModule,
        CommonModule,
       
        FormsModule,
        BsDropdownModule,
        UploaderModule,
        TabModule,
        SidebarModule,
        MultiSelectModule,
        DropDownListModule,
        DatePickerModule,
        SwitchModule,
        MatTooltipModule,
        UiModule,
        DragDropModule,
        TooltipModule,
        MatListModule,
        RadioButtonModule,
        ScrollingModule,
        UtilsModule,
        CommonModule_1,
        
    ],
    entryComponents: [
        
    ]
})

export class BuilderModule {}

When I am clicking on the menu button, I face an exception as

core.mjs:7739 ERROR TypeError: Cannot read properties of undefined (reading 'querySelector')
    at Observer.<anonymous> (ej2-splitbuttons.es2015.js:683:39)
    at Observer.notify (ej2-base.es2015.js:2311:32)
    at DropDownButton.trigger (ej2-base.es2015.js:5164:43)
    at DropDownButton.closePopup (ej2-splitbuttons.es2015.js:679:14)
    at DropDownButton.mousedownHandler (ej2-splitbuttons.es2015.js:597:18)
    at push.23484._ZoneDelegate.invokeTask (zone.js:443:1)
    at Object.onInvokeTask (core.mjs:25681:1)
    at push.23484._ZoneDelegate.invokeTask (zone.js:442:1)
    at push.23484.Zone.runTask (zone.js:214:1)
    at push.23484.ZoneTask.invokeTask [as invoke] (zone.js:525:1)