Create a form for each element in an array using Blazor

I want to create a page which loads existing values from a database and allows the user to edit them. I know some c# but I am new to Blazor, so I tried doing it the way I thought was correct, but it isn't working. The problem is that when I fill in something in a field and click on the submit button, I get a console log with the old value. I have tried a lot of things, but none of them solve the issue. Am I missing something here, or is my fundamental approach wrong?

This is the AppVersion class:

using System.ComponentModel.DataAnnotations;

namespace Domain.Entities;

public class AppVersion: BaseEntity
{
    [Required]
    public string? VersionNumber { get; set; }
}

@page "/version"
@using Service
@using Domain.Entities
@inject AppVersionService AppVersionService

<PageTitle>App Versions</PageTitle>
<div>
    @if (Appversions == null)
    {
        <p>Loading...</p>
    }
    else
    {
        @foreach (var appVersion in Appversions)
        {
            var formName = appVersion.Id.ToString();
            <EditForm Model="appVersion" OnValidSubmit="@ValidUpdateFormSubmitted" OnInvalidSubmit="@InvalidFormSubmitted" FormName="@formName">
                <DataAnnotationsValidator/>
                <ValidationSummary/>
                <span>VersionNumber</span>
                <input
                    type="text"
                    placeholder=""
                    @bind="appVersion.VersionNumber"/>
                <button type="submit">
                    Save
                </button>
            </EditForm>
        }
    }
</div>

@code {
    private AppVersion NewAppVersion { get; set; } = new();
    private IList<AppVersion>? Appversions { get; set; }
    
    protected override async Task OnInitializedAsync()
    {
        Appversions = await AppVersionService.GetAllAsync();
    }
    
    private async Task ValidUpdateFormSubmitted(EditContext editContext)
    {
        var appVersion = editContext.Model as AppVersion;
        
        Console.WriteLine($"Appversion number in Blazor page: {appVersion.VersionNumber}");
        await AppVersionService.UpdateAsync(appVersion);
    }
}

Edit: Thanks to Jeb's answer, I could do some digging. Turns out this only work with @rendermode InteractiveServer enabled. I still don't understand why, so I'm going to file a bug report on GitHub to see what's happening here. Bind-value does not work at all, even with rendermode on InteractiveServer.

@page "/test"

@* @rendermode InteractiveServer *@
@using System.ComponentModel.DataAnnotations

<PageTitle>App Versions</PageTitle>
<div>
    @foreach (var appVersion in Appversions)
    {
        var formName = appVersion.Id.ToString();
        @appVersion.VersionNumber
        <EditForm Model="appVersion" OnValidSubmit="@ValidUpdateFormSubmitted" FormName="@formName">
            <DataAnnotationsValidator/>
            <ValidationSummary/>
            <span>VersionNumber</span>
            <input type="text"
                   placeholder=""
                   class="bg-slate-700"
                   @bind="appVersion.VersionNumber"/>
            <button type="submit">
                Save
            </button>
        </EditForm>
    }
</div>

@code {

    public class AppVersion //: BaseEntity
    {
        public int Id { get; set; }

        [Required]
        public string? VersionNumber { get; set; }
    }
    
    private IList<AppVersion>? Appversions { get; set; }

    protected override void OnInitialized()
    {
        Appversions = new List<AppVersion>
        {
            new() { Id = 1, VersionNumber = "1.0.0" },
            new() { Id = 2, VersionNumber = "1.0.1" },
            new() { Id = 3, VersionNumber = "1.0.2" }
        };
    }

    private void ValidUpdateFormSubmitted(EditContext editContext)
    {
        var appVersion = editContext.Model as AppVersion;
        Console.WriteLine($"Appversion number in Blazor page: {appVersion?.VersionNumber}");
    }
}