Dynamic NavMenu

I am trying to implement the default NavMenu.razor with a number of NavLinks where one of the items is not visible by default. It should only become visible after an authenticated user belonging to a specific role condition is true. My code snippet is below. It seems a challenge of refreshing the navmenu. I have attempted implementing StateHasChanged() at various points without success. Kindly advise.

@if (authService.isinTargetRole)

{

<NavLink class="nav-link" href="targetPage")>

    <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Target Page

</NavLink>

} else

{

<NavLink class="nav-link" href="targetPage" hidden>

    <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Target Page

</NavLink>                

}