I have a project with angular 16 and PrimeNg 16.0.

I would like to update my TieredMenu from the code. In console log I see that the model has been updated, but when I open the TieredMenu I still see the old values.

Where component.html:

...
<p-button
  styleClass="p-button-text p-button-secondary"
  (click)="menu.toggle($event)"
  ><span class="pi pi-user pr-2"></span> {{userName}}
  <span class="pi pi-chevron-down pl-2 text-xs"></span
></p-button>

<p-tieredMenu #menu [model]="items" [popup]="true"></p-tieredMenu>
...

And component.ts:

templateTieredItems: MenuItem[] = [
    {
      label: 'Login',
      icon: 'pi pi-arrow-circle-right',
      command: (_) => this.loginUIupdate(),
    },
    {
      label: 'Logout',
      icon: 'pi pi-power-off',
      command: (_) => this.logoutUIupdate(),
    },
  ];

items: MenuItem[] | undefined;
...
constructor() {
  this.logoutUIupdate();
}

loginUIupdate() {
    let template = JSON.parse(JSON.stringify(this.templateTieredItems));
    template = this.templateTieredItems.filter(
      (s) => s.label != 'Login'
    );
    this.items = template;
}

logoutUIupdate() {
    let template = JSON.parse(JSON.stringify(this.templateTieredItems));
    template = this.templateTieredItems.filter(
      (s) => s.label != 'Logout'
    );
    this.items = template;
}

ngOnInit() {
    this.logoutUIupdate();
}

How can I dynamically change menus in the PrimeNg TieredMenu?