Blazor Server Async ForEach component is not working

With Blazor, I am trying to write a generic component for IAsyncEnumerable list. Below is the code for "AsyncForEach.razor" but it s not working as IAsyncEnumerable is a reference object. I assumed it would work fine but it is either returning empty output or throwing error and unfortunately, no details. but from the debug I know List<TItem> List has items after the call. I know the AsyncList property is redundant, however, I tried a couple of approaches to bind the data and no success.

@typeparam TItem@foreach (var item in List){    @ItemTemplate(item)}@code {    List<TItem> List = new List<TItem>();    [Parameter] public IAsyncEnumerable<TItem> AsyncList { get; set; }    [Parameter]    public required RenderFragment<TItem> ItemTemplate{ get; set; }    public async Task LoadDataAsync(IAsyncEnumerable<TItem> asyncList)    {        AsyncList = asyncList;        List.Clear();        await foreach (var item in AsyncList ?? AsyncEnumerable.Empty<TItem>())        {            List.Add(item);            if (List.Count % 50 == 0) StateHasChanged();        }        StateHasChanged();    }}

Below is how I use it.

<AsyncForEach @ref="peopleForEach" TItem="Person"><ItemTemplate Context="p">        @p.Name</ItemTemplate>    </AsyncForEach>@code {    private AsyncForEach<Person> peopleForEach = null!;    private async Task LoadPeople()     {        await peopleForEach.LoadDataAsync(GetPeopleAsync());    }}