Mouse event mouseleave triggered but mouse pointer still inside the button

Question

I'm trying to create a material menu which shows menu on hover using angular material 16, but I have an issue with mouse mouseleave event which triggers just when entering the button.

Here is the template of the component:

<ng-container *ngFor="let menuItem of menuList">
  <ng-container *ngIf="!menuItem.children">
    <button
      class="nav-link"
      [routerLink]="menuItem.link"
      style="z-index: 1050;"
    >
      <span class="icon fa" [ngClass]="menuItem.icon"></span>
      <span class="text-holder">{{ menuItem.label }}</span>
    </button>
  </ng-container>
  <ng-container *ngIf="menuItem.children && menuItem.children.length > 0">
    <button
      #button
      mat-button
      [matMenuTriggerFor]="levelOne"
      #levelOneTrigger="matMenuTrigger"
      (mouseenter)="buttonEnter(levelOneTrigger)"
      (mouseleave)="buttonLeave(levelOneTrigger, button)"
      style="z-index:2000"
    >
      <span class="icon fa" [ngClass]="menuItem.icon"></span>
      <span
        >{{ menuItem.label }}
        <i class="fa fa-chevron-down"></i>
      </span>
    </button>

    <mat-menu
      #levelOne="matMenu"
      direction="down"
      yPosition="below"
      class="mnred1"
    >
      <span
        (mouseenter)="menuenter()"
        (mouseleave)="menuLeave(levelOneTrigger, button)"
        class="mnred2"
      >
        <ng-container *ngFor="let childL1 of menuItem.children">
          <li class="p-0" *ngIf="!childL1.children" mat-menu-item>
            <a class="nav-link"
              >{{ childL1.label }}
              <i *ngIf="childL1.icon" [ngClass]="childL1.icon"></i>
            </a>
          </li>
          <ng-container *ngIf="childL1.children && childL1.children.length > 0">
            <li
              mat-menu-item
              #levelTwoTrigger="matMenuTrigger"
              [matMenuTriggerFor]="levelTwo"
            >
              <span class="icon fa" [ngClass]="childL1.icon"></span>
              <span>{{ childL1.label }}</span>
            </li>

            <mat-menu #levelTwo="matMenu">
              <span
                (mouseenter)="menu2enter()"
                (mouseleave)="
                  menu2Leave(levelOneTrigger, levelTwoTrigger, button)
                "
              >
                <ng-container *ngFor="let childL2 of childL1.children">
                  <li class="p-0" mat-menu-item>
                    <a class="nav-link"
                      >{{ childL2.label }}
                      <i *ngIf="childL2.icon" [ngClass]="childL2.icon"></i>
                    </a>
                  </li>
                </ng-container>
              </span>
            </mat-menu>
          </ng-container>
        </ng-container>
      </span>
    </mat-menu>
  </ng-container>
</ng-container>

When I put a breakpoint in the method: buttonLeave, it is called immediately after the mouse enters the button

This event should be called when mouse leave the button, can someone explain why ?

And because of that, the menu show and close quickly.

Here is a Stackblitz demo.