Custom Excel like Select Filter for Blazor Table

Question

Im working on a school project with Blazor Server. The app gets data from my database and shows the data in a Table. I need some custom filter options for in for that table.

When I click the filter icon in a column, a component opens/is Visible with checkboxes. When I click ok it shows all data where the column == checkbox value.

It works so far, but when I click on filter icon again and close the component, then open it again, the checkboxes which i checked, are not checked anymore. Any ideas how to fix this behaviour?

Here is the code for the Checkbox filter (child component) :

@using Devops.Data;



<div class="ml-[21.2vw] mt-[20vh] filter overflow-y-auto">
    <form>
        <fieldset>
            <div class="searchFILTER">
                <i id="searchFILTER" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 26" fill="none">
                    <svg id="searchFILTER" xmlns="http://www.w3.org/2000/svg" width="25" height="26" viewBox="0 0 25 26"
                         fill="none">
                        <g clip-path="url(#clip0_385_168)">
                            <path fill-rule="evenodd" clip-rule="evenodd"
                                  d="M17.5149 16.6719L21.5969 20.7539C21.6851 20.8421 21.7551 20.9469 21.8029 21.0622C21.8506 21.1775 21.8752 21.301 21.8752 21.4258C21.8752 21.5506 21.8506 21.6741 21.8029 21.7894C21.7551 21.9047 21.6851 22.0094 21.5969 22.0977C21.5087 22.1859 21.4039 22.2559 21.2886 22.3036C21.1734 22.3514 21.0498 22.376 20.925 22.376C20.8002 22.376 20.6767 22.3514 20.5614 22.3036C20.4461 22.2559 20.3414 22.1859 20.2531 22.0977L16.1719 18.0149C14.5556 19.2885 12.5138 19.8965 10.4641 19.7146C8.41436 19.5327 6.51155 18.5746 5.14483 17.0362C3.7781 15.4979 3.05072 13.4955 3.11143 11.4386C3.17213 9.3817 4.01635 7.42571 5.47142 5.97063C6.9265 4.51556 8.88248 3.67134 10.9394 3.61063C12.9963 3.54993 14.9986 4.27731 16.537 5.64404C18.0754 7.01077 19.0335 8.91357 19.2154 10.9633C19.3973 13.013 18.7893 15.0548 17.5156 16.6711L17.5149 16.6719ZM5.13986 11.6867C5.1397 10.4911 5.49411 9.32223 6.15825 8.328C6.82239 7.33377 7.76643 6.5588 8.87101 6.1011C9.97559 5.64341 11.1911 5.52353 12.3638 5.75664C13.5365 5.98975 14.6137 6.56537 15.4593 7.41071C16.3049 8.25606 16.8808 9.33315 17.1142 10.5058C17.3476 11.6784 17.228 12.894 16.7706 13.9987C16.3132 15.1034 15.5385 16.0476 14.5444 16.712C13.5504 17.3764 12.3816 17.7311 11.1859 17.7313C9.583 17.7294 8.04623 17.0918 6.91277 15.9583C5.77931 14.8249 5.14172 13.2881 5.13986 11.6852V11.6867Z"
                                  fill="#3D4A57" />
                        </g>
                        <defs>
                            <clipPath id="clip0_385_168">
                                <rect width="25" height="25" fill="white" transform="translate(0 0.5)" />
                            </clipPath>
                        </defs>
                    </svg>
                </i>
                <input type="text" class="w-[8.48vw]" placeholder="Search" />
            </div>

            <div class="space-y-2">
                @foreach (var item in SelectOptions)
                {
                    <div class="flex items-center mt-[1vh]">
                        <input id="New" type="checkbox" name="type[New]" class="h-[1.5vh] w-[1.5vw] check"
                        @onchange="() => HandleCheckBox(item)" />
                        <label for="New" class="ml-1 releaseTEXT"> @item.releasename </label>
                    </div>
                }
            </div>
        </fieldset>
    </form>
    <button @onclick="UpdatesortedProjects" name="commit" type="button"
            id="btn">
        OK
    </button>
</div>

@code {

[Parameter] public List<Projects> SelectOptions { get; set; } = new List<Projects>();
[Parameter] public List<Projects> AllProjects { get; set; } = new List<Projects>();
[Parameter] public List<Projects> ListWithCheckedProjects { get; set; } = new List<Projects>();
[Parameter] public List<Projects> ListWithCheckedReleases { get; set; } = new List<Projects>();
[Parameter] public List<Projects> sortedProjects { get; set; } = new List<Projects>();
[Parameter] public string columnName { get; set; }
private List<Projects> FirstFilter = new List<Projects>();
[Parameter] public EventCallback<List<Projects>> OnUpdateSortedProjects { get; set; }

protected override void OnInitialized()
{



}

private void HandleCheckBox(Projects project)
{
    if (!ListWithCheckedReleases.Contains(project))
    {
        ListWithCheckedReleases.AddRange(sortedProjects.Where(p => p.releasename == project.releasename));
        Console.WriteLine("Aktuell Gefiltert nach:");
        foreach (var item in ListWithCheckedReleases)
        {
            Console.WriteLine(item.releasename);
        }
    }
    else if (ListWithCheckedReleases.Contains(project))
    {
        ListWithCheckedReleases.RemoveAll(p => p.releasename == project.releasename);
        Console.WriteLine("GELÖSCHT:");
        Console.WriteLine("Aktuell Gefiltert nach:");
        foreach (var item in ListWithCheckedReleases)
        {
            Console.WriteLine(item.releasename);
        }
        
    }

}

private async Task UpdatesortedProjects()
  {
    await OnUpdateSortedProjects.InvokeAsync(ListWithCheckedReleases);
  }

  private void unselectAll()
  {
    ListWithCheckedReleases.Clear();
    StateHasChanged();
  }
}