Blazor TableTemplate DataSource Or Items Not Updating After Modifying Its Items When CheckBoxChanged Is Fired

Good day!

As I was following a module on component templates in Blazor, it illustrates a table template with a row template and has a checkbox control that when clicked, it will fire an event and alter the value of a property of a collection.

<TableTemplate Items="benefits" IsSmall="true">
    <TableHeader>
        <th class="w-auto">Benefit</th>
        <th class="w-25">Start date</th>
        <th class="w-25">End date</th>
    </TableHeader>
    <RowTemplate>
        <td>
            <input type="checkbox"
                   checked="@context.Selected"
                   @onchange="e => CheckBoxChanged(e, context)" />
        </td>
        <td>@context.Description</td>
        @if (@context.Selected)
        {
            <td>@context.StartDate?.ToString("dd/MM/yyyy")</td>
            <td>
                <DateField @ref="dateFieldRef"
                           @bind-Date="context.EndDate"
                           placeHolder="Enter a date"
                           required="required"
                           maxLength="50" />
            </td>
        }
        else
        {
            <td></td>
            <td></td>
        }
    </RowTemplate>
</TableTemplate>

However upon doing so, it does not update the collection. Later, I found out that the type of the collection is IEnumerable which is readonly.

private IEnumerable<BenefitEmployeeModel> benefits{ get; set; } = null;

Changing that type to List solved the issue.

private List<BenefitEmployeeModel> benefits{ get; set; } = null;

Cheers!