Describe the bug

When a tab is selected, it will render a blue bottom border as the screenshot below

When the object page has scrollBehavior: 'smooth' and multiple tabs, selection change from one tab to another tab, for example from "Goals" to "Job Infomation" will cause the blue bottom border changing back and forth. The blue bottom border appears in the following order, "Goals" -> "Job Information" -> "Personal" -> "Employment" -> "Job Information"

Isolated Example

https://stackblitz.com/edit/github-r35bfcyv-n5jpmtc2?file=src%2FApp.tsx

Reproduction steps

1. Click on "Goals" tab
2. Click on "Job Information" tab

Expected Behaviour

whenever a tab is clicked, the blue bottom border should remain unchanged under that tab.

Screenshots or Videos

UI5 Web Components for React Version

2.7.2

UI5 Web Components Version

2.7.0

Browser

Chrome

Operating System

No response

Additional Context

No response

Relevant log output

Organization

No response

Declaration

• I’m not disclosing any internal or sensitive information.