Blazorを新規作成したばかりの画面で表示されているエラーについて

Blazorをちょっと使ってみようかなと思い、新規プロジェクトをWebAssemplyで作成したところ、まだ何も手を加えていないのに、いきなり**<LoginDisplay />**という項目に赤い波線が付き、

Found markup element with unexpected name 'LoginDisplay'. If this is intended to be a component, add a @using directive for its namespace.

というエラーを表示していました。

おそらくログインユーザ名を表示する箇所のエラーで、何かをusingで参照しろということみたいですが、これは一体何なのでしょうか？どうすればエラーを解消できるでしょうか？

MainLayout.razor

C#
1@inherits LayoutComponentBase
2
3<div class="page">
4    <div class="sidebar">
5        <NavMenu />
6    </div>
7
8    <div class="main">
9        <div class="top-row px-4 auth">
10            <LoginDisplay />
11            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
12        </div>
13
14        <div class="content px-4">
15            @Body
16        </div>
17    </div>
18</div>

LoginDisplay.razor

C#
1@using Microsoft.AspNetCore.Components.Authorization
2@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
3
4@inject NavigationManager Navigation
5@inject SignOutSessionStateManager SignOutManager
6
7<AuthorizeView>
8    <Authorized>
9        Hello, @context.User.Identity.Name!
10        <button class="nav-link btn btn-link" @onclick="BeginSignOut">Log out</button>
11    </Authorized>
12    <NotAuthorized>
13        <a href="authentication/login">Log in</a>
14    </NotAuthorized>
15</AuthorizeView>
16
17@code{
18    private async Task BeginSignOut(MouseEventArgs args)
19    {
20        await SignOutManager.SetSignOutState();
21        Navigation.NavigateTo("authentication/logout");
22    }
23}