I am trying to convert my app to a Zoneless Angular application. Since converting the application to zoneless, some Angular CDK features don’t work as I expected.

I fixed the OverlayRef by calling updatePosition and it works well but I can’t find out how to fix the CdkMenuTriggerFor. When I open menu, the menu list items appear very weird. My code is below

<div class="flex items-center text-white">
<div [cdkMenuTriggerFor]="menu" class="flex items-center cursor-pointer">
  <img
    src="assets/images/default-ava.png"
    alt="Default Avatar"
    class="desktop:w-12 desktop:h-12 mobile:w-8 mobile:h-8 mr-2"
  />
</div>
<ng-template #menu>
  <app-menu cdkMenu>
    <app-menu-item cdkMenuItem class="mobile:block desktop:hidden">{{ userDetails()?.name }}</app-menu-item>
    <app-menu-item cdkMenuItem (click)="viewProfile()">Profile</app-menu-item>
    <app-menu-item cdkMenuItem (click)="logout()">Log out</app-menu-item>
  </app-menu>
</ng-template>

How can I fix the CdkMenuTriggerFor behavior in Angular Zoneless application?