Как сделать Tab на Blazor с помощью RenderFragment

Хочу сделать динамические табы с удалением и добавлением.Есть компонент, который рендерит мои табы с помощью цикла. При добавлении все нормально. В саму разметку передаю RenderFragmnet, который открывает мой компонент. Суть проблемы: при удалении таба справа от выбранного текущего таба, то он не начинает перерисовывать страницу. А если удалить слева, то он перерисовывает все табы. А мне нужно, чтоб он этого не делал т.к в этих компонентах происходят некоторые действия и нужно, что данные не потерялись. Главный компонент, который отрисовывает табы:

<div class="main">
<div class="header_tab" @ref="@headerTab">
    @foreach (var item in Tabs)
    {
        <div class="header_item">
            <div class="header_item_name" @onclick="()=>SelectTab(item)">@item.Name</div>
            <div class="header_item_icon" @onclick="async()=>CloseTabCallback(item)"><i class="fa-solid fa-xmark"></i></div>
        </div>
    }
</div>
<div class="content_tab" @ref="@contentTab">
    @foreach (var item in Tabs)
    {
        <div class="content_tab_render">
            @if (item.Module is not IJsModule)
            {
                @GetRenderFragment(item)                   
            }
            else
            {
                <JsTab Tab="@item"/>
            }
        </div>
    }
</div>

Метод GetRenderFragment

protected RenderFragment GetRenderFragment(TabView tab)
    {
        var Module = tab.Module;
        Type typeModule = null;

        if (Module is IVisualModule)
        {
            typeModule = (Module as IVisualModule).GetComponentType();
        }

        if (Module is ITaskModule)
        {
            typeModule = (Module as ITaskModule).GetComponentType(tab.CommonEntity);
        }

        RenderFragment render = builder =>
        {
            builder.OpenComponent(0, typeModule);
            if (tab.CommonEntity != null)
            {
                builder.AddAttribute(1, "CommonEntity", tab.CommonEntity);
            }
            builder.CloseComponent();
        };
        return render;
    }

Метод SelectTab(item) изменяет индекс на новый выбранный таб. Метод CloseTabCallback(item) удаляет из коллекции табов выбранный таб. Модель TabView

 public class TabView
{
    public string Name { get; set; }
    public CommonEntity CommonEntity { get; set; }
    public Guid Id { get; set; }
    public IModule Module { get; set; }
}

Интерфейсы Imodule, IVisualModule,ITaskModule ни на что не влияют. Они нужны только чтоб открыть нужный компонент через RenderFragment. Путь как это работает: Человек нажимает на название компонента -> происходит создание класса TabView с заполнением данных -> Добавляется в коллекцию -> отрисовывается новый таб и переключается на него с помощью Javascript

export function indexChanged(newIndex, headerTab, contentTab) {

[...headerTab.children].forEach((child, i) => {

    const nameAction = (i === newIndex) ? 'add' : 'remove';
    child.classList[nameAction]("active");
});


[...contentTab.children].forEach((child, i) => {

    child.style.display = (i === newIndex) ? 'block' : 'none';
});

}

И когда хочешь удалить слева от выбранного таба, то он ничает все заново ререндерить. Пробовал удалять табы через Js, но Blazor начал ругаться, что нельзя изменять DOM дерево. Еще пробовал через ShouldRender где ставил false, но ничего не помогло. Может кто-то объяснит как сказать Blazor, что он не начинал перерендерить страницу, а только плавно удалить кусок при удалении из коллекции