I’m trying to create a error handler for a Blazor App.
I’ve reviewed the offical instruiction on Microsoft Learn

Here is my MainLayout

@inherits LayoutComponentBase

<FluentLayout>
    <FluentHeader>
        -----
    </FluentHeader>
    <FluentStack Class="main" Orientation="Orientation.Horizontal" Width="100%">
        <NavMenu />
        <FluentBodyContent Class="body-content">
            <div class="content">
                @Body
            </div>
        </FluentBodyContent>
    </FluentStack>
    <FluentFooter>
        <a href="https://www.fluentui-blazor.net" target="_blank">Documentation and demos</a>
        <FluentSpacer />
        <a href="https://learn.microsoft.com/en-us/aspnet/core/blazor" target="_blank">About Blazor</a>
    </FluentFooter>
</FluentLayout>

<article class="content">
    <ErrorBoundary @ref="errorBoundary">
        <ChildContent>
            @Body
        </ChildContent>
        <ErrorContent>
            <p class="errorUI">???? A rotten gremlin got us. Sorry!</p>
        </ErrorContent>
    </ErrorBoundary>
</article>


@code {
    private ErrorBoundary? errorBoundary;

    protected override void OnParametersSet()
    {
        errorBoundary?.Recover();
    }
}

I enabled the detailed error, I can see the error log in the console but can’t display the ErrorBoundary component in the page.