🐛 Bug Report

I have a component that builds makes a tab for each item in a list. When the user filters the list down to a subset of items the number of tabs is correctly updated in the UI but it leaves behind an orphaned badge of overflow items that previously existed.

💻 Repro or Code Sample

<FluentSwitch @bind-Value=hideInactive >Hide Inactive Items</FluentSwitch>
<FluentTabs @bind-ActiveTabId="@activeid" OnTabChange="HandleOnTabChange" Data="@Items">
@foreach (var item in Items)
{
     <FluentTab Id="@($"tab-{item.Name}")" @bind-Label="@item.Name" Data="@item" > item.Content </FluentTab>
}
</FluentTabs>

@code 
{
     private bool hideInactive;
     List<Items> => Projects.Where(n => n.Active == hideInactive).ToList();
}

🤔 Expected Behavior

If the number of items in the list changed such that there is no longer an overflow, those items should be properly disposed of from TabsOverflow.

😯 Current Behavior

When I change the slider to hide inactive projects, the number of tabs is reduced to the expected amount. If there was an overflow prior to reducing the list of items then the overflow badge remains along with any tab-ids that were in the overflow prior to the item list change.

🌍 Your Environment

• OS & Device: Windows 11 on PC
• Browser: Microsoft Edge
• .NET SDK Version: 9.0.101
• Fluent UI Blazor library Version: 4.11.3
• Project Target: net8.0