The error is:

Cannot bind source content type MyApplication.Models.Login to model type MyApplication.Core.Models.ViewModels.LoginViewModel

My structure looks like this: Login.html

csharp
@await Component.InvokeAsync("RenderLogin");

RenderLogin ViewComponent

csharp
LoginViewModel model = new(currentPage, new PublishedValueFallback(_serviceContext, _variationContextAccessor));
return View("LoginForm.cshtml", model );

LoginForm.cshtml

csharp
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<LoginViewModel>
@using (Html.BeginUmbracoForm("Login", "Member",  new {}, new {}, FormMethod.Post))
{      
    <input asp-for="@Model.Username" />
    <input asp-for="@Model.Password" />
    <button type="submit">Login</button>
}

MemberController (inherits from SurfaceController)

csharp
[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult HowAboutThis(LoginViewModel model)
{    
    return CurrentUmbracoPage();
}

LoginViewModel

csharp
public class LoginViewModel : Login
{
    ...
    public LoginViewModel(IPublishedContent content,
                           IPublishedValueFallback publishedValueFallback) : base(content, publishedValueFallback)
    {
    }
}

Login

is a content model from the back office, used to output content on LoginForm. Using

<form asp-action="Login" asp-controller="Member" method="POST">

hits the controller, but the model doesn't bind and

CurrentUmbracoPage();

is not available. Removing the model from the Login method works , but I need its content. How should I do this? I guess it's due to

LoginViewModel

inheriting

Login

, but I understand this is okay to extend the view model. Any help would be much appreciated.