Problem with the displaying of a razor component

Question

I have this razor component:

@using Microsoft.AspNetCore.Components.Forms
@page "/category/create"
@using BakingBeyondRecipesServer.Model
@using DataAccess.Data
@using Models;

<div class="row mt-2 mb-5">
    <h3 class="card-title text-info mb-3 ml-3">Create New Category</h3>
    <div class="col-md-12">
        <div class="card-body">
            
            <EditForm Model="CategoryModel">
                <div class="form-group">
                    <label>Name</label>
                    <InputText @bind-Value="CategoryModel.Name" class="font-control"></InputText>
                </div>
                <button type="submit" class="btn btn-primary">Create</button>
            </EditForm>
        </div>
    </div>
</div>

@code {
    private DataAccess.Data.Recipe Recipe { get; set; } = new DataAccess.Data.Recipe();
    private DataAccess.Data.Category Category {get;set;} = new DataAccess.Data.Category();
    private CategoryDto CategoryModel = new CategoryDto();

    private void HandleValidSubmit()
    {
        // Perform actions on form submission
    }
}


And I have those warnings:

Warning (active)    RZ10012    Found markup element with unexpected name 'InputText'. If this is intended to be a component, add a @using directive for its namespace.       

Warning (active)    RZ10012    Found markup element with unexpected name 'EditForm'. If this is intended to be a component, add a @using directive for its namespace.       

I don't know what I'm missing. 

This is how it looks when I start the program: