Совместное использование одного свойства на нескольких страницах cshtml в Blazor

Я изо всех сил пытаюсь разделить значение свойств между компонентами в Blazor. В основном у меня есть кнопка с событием onclick, которое устанавливает значение функции в зависимости от значения, которое другая страница cshtml должна реагировать на значение, а это не так. Проблема в том, что поскольку обе страницы cshtml наследуют одну и ту же функцию, у них есть собственный экземпляр функции. Вот мой код:

функция:

public class MenuFunctions : BlazorComponent, IMenuFunctions
{

    public bool CollapseNavMenu
    {
        get ; set;

    }

    public void ToggleNavMenu()
    {
        CollapseNavMenu = !CollapseNavMenu;
    }
}

Основная кнопка в NavMenuToggleComponent.cshtml:

@inherits MenuFunctions 

<div class = "pl-4  navbar navbar-dark">
   <button class = "navbar-toggler navbar-brand main-button" title = "MENU" onclick=@ToggleNavMenu>
    MENU
   </button>
</div>

мой файл NavMenu.cshtml:

@inherits MenuFunctions


<div class = "@(CollapseNavMenu ? "collapse" : null)" onclick=@ToggleNavMenu>
<ul class = "nav flex-column">
    <li class = "nav-item px-3">
        <NavLink class = "nav-link" href = "home">
            <span class = "oi oi-home" aria-hidden = "true"></span> Home
        </NavLink>
    </li>
    <li class = "nav-item px-3">
        <NavLink class = "nav-link" href = "frontpage">
            <span class = "oi oi-home" aria-hidden = "true"></span> Front Page
        </NavLink>
    </li>
    <li class = "nav-item px-3">
        <NavLink class = "nav-link" href = "counter">
            <span class = "oi oi-plus" aria-hidden = "true"></span> Counter
        </NavLink>
    </li>
    <li class = "nav-item px-3">
        <NavLink class = "nav-link" href = "" Match=NavLinkMatch.All>
            <span class = "oi oi-account-login" aria-hidden = "true"></span> Login
        </NavLink>
    </li>
</ul>
</div>

собрать все это вместе в моем MainLayout.cshtml

@inherits BlazorLayoutComponent

<NavMenuToggleComponent></NavMenuToggleComponent>
<div class = "sidebar">
   <NavMenu />
</div>

<div class = "main">

<div class = "top-row px-4">
    <a href = "http://blazor.net" target = "_blank" class = "ml-md-auto">About</a>
    <NavLink class = "nav-link pull-right" href = "logout">
        <span class = "oi oi-account-logout" aria-hidden = "true"></span> Logout
    </NavLink>
</div>

<div class = "content px-4">
    @Body
</div>
</div>

поэтому, когда я нажимаю кнопку в NavMenuToggleComponent.cshtml, я хочу, чтобы CollapseNavMenu реагировал в файле NavMenu.cshtml

Если я уберу использование интерфейса, то добавлю компоненты на страницы вместо Inherit, а затем добавлю в автозагрузку следующее:

services.AddSingleton<MenuFunctions>();

страницы будут загружаться, но я все еще получаю ту же проблему.