Timeline item do not update / re-render

Describe the bug

Timeline item do not update / re-render when model change.

Steps to reproduce (please include code)

<Timeline>
	@foreach (var item in model.Items)
	{
		<TimelineItem>
			<span>@item.Text</span>
		</TimelineItem>
	}
</Timeline>

<Button OnClick="() => visible = true">Update</Button>
<Modal Title="Title.."
		Visible="@visible"
		OnOk="@HandleOk"
		ConfirmLoading="@confirmLoading"
		OnCancel="@HandleCancel">
	<p>
		test..
	</p>
</Modal>

@code
{
	private bool visible = false;
	private bool confirmLoading = false;

	private TestComponentParam model = new()
	{
		Items = new List<TestComponentParamItem>()
		{
			new()
			{
				Text = "A",
			},
			new()
			{
				Text = "B",
			},
			new()
			{
				Text = "C",
			},
			new()
			{
				Text = "D",
			},
		},
	};

	private async Task HandleOk(MouseEventArgs e)
	{
		confirmLoading = true;

		await Task.Delay(500);

		model.Items = model.Items.Select(x => new TestComponentParamItem
		{
			Text = x.Text + "x",
		}).ToList();

		visible = false;
		confirmLoading = false;
	}

	private void HandleCancel(MouseEventArgs e)
	{
		visible = false;
	}

	public class TestComponentParam
	{
		public List<TestComponentParamItem> Items { get; set; }
	}

	public class TestComponentParamItem
	{
		public string Text { get; set; }
	}
}

Further technical details

• AntDesign Nuget Package version: 0.7.4

[ElderJames]

Hi @jirisykora83 , thanks for contacting us.

Please add a @key for loop. There is the official doc about this. Use @key to control the preservation of elements and components

<Timeline>
    @foreach (var item in model.Items)
    {
        <TimelineItem @key="item.Id">
            <span>@item.Text</span>
        </TimelineItem>
    }
</Timeline>

[ElderJames]

Can you provide a better example to illustrate this please?