The main objective of the project is to get the state of the counter to a button in the screen and in the navmenu with brackets like eg:Counter(2)

Actions I did to Reproduce:

I created a new Blazor WebAssembly project.
Installed Fluxor using NuGet.
Set up the state, actions, and reducers as follows:

CounterState.cs:

public class CounterState
{
    public int Count { get; }

    public CounterState(int count)
    {
        Count = count;
    }
}

IncrementCounterAction.cs:

public class IncrementCounterAction { }

CounterReducers.cs:

using Fluxor;

public static class CounterReducers
{
    [ReducerMethod]
    public static CounterState ReduceIncrementCounterAction(CounterState state, IncrementCounterAction action) =>
        new CounterState(state.Count + 1);
}

Configured Fluxor in Program.cs:

using BlazorApp1;
using Fluxor;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

// Configure Fluxor
builder.Services.AddFluxor(options => options
    .ScanAssemblies(typeof(Program).Assembly)
    .UseReduxDevTools());

await builder.Build().RunAsync();

Updated Counter.razor to use Fluxor:

@page "/counter"

@using Fluxor
@inject IState<CounterState> CounterState
@inject IDispatcher Dispatcher

<h1>Counter</h1>

<p role="status">Current count: @CounterState.Value.Count</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private void IncrementCount() => Dispatcher.Dispatch(new IncrementCounterAction());
}

Updated NavMenu.razor to show the count:

@using Fluxor
@inject IState<CounterState> CounterState

<div class="top-row ps-3 navbar navbar-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="">BlazorApp1</a>
        <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
</div>

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <nav class="flex-column">
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="counter">
                <span class="oi oi-plus" aria-hidden="true"></span> Counter (@CounterState.Value.Count)
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="fetchdata">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
            </NavLink>
        </div>
    </nav>
</div>

@code {
    private bool collapseNavMenu = true;

    private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;

    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }
}

Problem:
When I run the application, I get the following error: Unhandled exception rendering component: Unable to resolve service for type ‘Fluxor.IFeature’ while attempting to activate ‘Fluxor.State’.

What I’ve Tried:

Ensuring that all classes are public.
Cleaning and rebuilding the solution.
Verifying that Fluxor is correctly configured in Program.cs.
Environment:

.NET 6.0
Visual Studio 2022
Blazor WebAssembly
Any help or suggestions would be greatly appreciated!