Почему @ref на стороне сервера Blazor некорректно отображается после удаления элементов?

Вот мой код в интерфейсе:

    @page "/"
    @inject IJSRuntime JSRuntime
    
    <ul>
        @foreach (TestClass i in TestList)
        {
            if (i.Count != 0)
            {
            <li>
                <button @onclick="() => RemoveVoid(i)" style="display:inline-block">Remove</button>
                <p @ref="@i.Reference" style="display:inline-block">@(string.Format("{0}×{1}", @i.Name, i.Count))</p>
                <button @onclick="() => AddVoid(i)" style="display:inline-block">Add</button>
            </li>
            }
        }
    </ul>
    
    @code{
        public class TestClass
        {
            public string Name;                
            public int Count=1;
            public ElementReference Reference;
    }
    List<TestClass> TestList = new List<TestClass>()
{
        new TestClass(){ Name="Apple" },
            new TestClass(){ Name="Pear" },
            new TestClass(){ Name="Banana" },
            new TestClass(){ Name="Orange" },
            new TestClass(){ Name="Melon" }
    };
    void AddVoid(TestClass i)
    {
        i.Count++;
        StateHasChanged();
        JSRuntime.InvokeVoidAsync("AppFunctions.Test", i.Reference);
    }
    void RemoveVoid(TestClass i)
    {
        i.Count--;
        StateHasChanged();
    }
}

А вот код на JS:

window.AppFunctions = {   
    Test: function (o) {
        o.style.backgroundColor = "red";
        setTimeout(function () {
            o.style.backgroundColor = "white";
        }, 2000);
    }    
};

Теперь это выглядит так:

Сначала убираем Грушу на 0.

А затем добавляем банан к 2.

Теперь вы обнаружите, что подсветка находится на апельсине, но не на банане.

Что в этом плохого?