Tab underline width doesn't change when the data of the tab changes

[nateshmbhat]

<Tabs
  value={$tabListConfigStore.activeTabIndex}
  on:change={onTabChange}>
  <div slot="tabs">
    {#each tabs as tab, i (i)}
      <Tab>
        {#if name}{name}{:else}{'RPC'}{/if}
      </Tab>
    {/each}
</Tabs>

I have a tab bar code that looks like shown above.
The name is a reactive variable. When the tab first shows up , name is undefined. So the tab has the underline that spans the full width of the tab button. Now the text "RPC" is shown.

when the name variable changes to some name let's say "my big name" , then though the text of the tab button changes, the underline still has the same width as before for the "RPC" name.

The text within the tab is updating but the tab underline itself is not updating.