Updating global breadcrumbs in blazor

I created this BreadcrumbService so that I can use it to inject breadcrumbs and update them globally.

public class BreadcrumbService{    private List<BreadcrumbItem> _breadcrumbItems = new List<BreadcrumbItem>();    public List<BreadcrumbItem> BreadcrumbItems    {        get => _breadcrumbItems;        set        {            _breadcrumbItems = value;            NotifyStateChanged();        }    }    public event Func<Task>? OnBreadcrumbsChanged;    public void SetBreadcrumbs(IEnumerable<BreadcrumbItem>? items)    {        _breadcrumbItems = items?.ToList() ?? new List<BreadcrumbItem>();        NotifyStateChanged();    }    private void NotifyStateChanged() => OnBreadcrumbsChanged?.Invoke();}

And I have injected the breadcrumbs into the MainLayout as such:

<MudMainContent><MudContainer MaxWidth="MaxWidth.Large" Style="height:max-content"><MudBreadcrumbs Items="BreadcrumbService.BreadcrumbItems"></MudBreadcrumbs><MudPaper Elevation="3" Style="height:100dvh;">            @Body</MudPaper></MudContainer></MudMainContent>

And in AppLayout, I am initializing the breadcrumbs:

protected override async Task OnInitializedAsync(){    BreadcrumbService.OnBreadcrumbsChanged += BreadcrumbsService_OnChange;}public void Dispose(){    BreadcrumbService.OnBreadcrumbsChanged -= BreadcrumbsService_OnChange;}private async Task BreadcrumbsService_OnChange(){    Breadcrumbs = BreadcrumbService.BreadcrumbItems;    await InvokeAsync(StateHasChanged);}

And finally I am using it as such:

@inject BreadcrumbService BreadcrumbServiceprotected override async Task OnInitializedAsync(){    BreadcrumbService.SetBreadcrumbs(new List<BreadcrumbItem>    {        new BreadcrumbItem("Home", href: "/", icon: Icons.Material.Filled.Home)    });    StateHasChanged();}...// In other componentBreadcrumbService.SetBreadcrumbs(new List<BreadcrumbItem>{    new BreadcrumbItem("Home", href: "/", icon: Icons.Material.Filled.Home),    new BreadcrumbItem("Blogs", href: "/blogs"),    new BreadcrumbItem($"Blog {Id}", href: $"/blogs/{ChapId}")});

My problem is that, it takes two clicks to update the breadcrumbs, and their behaviour is non deterministic, could you help me to fix this bug so that it updates the breadcrumbs on initialized a component?