TabView: Incorrect ink bar position when TabView is in Dialog

[zqtay]

Describe the bug

When TabView is used in Dialog and activeIndex is set to a number other than 0, the ink bar p-tabview-ink-bar is first displayed in an incorrect position. After clicking other tab then back to the same tab, the ink bar is displayed correctly.

This is only reproducible when TabView is in a Dialog component.

Reproducer

https://codesandbox.io/s/primereact-demo-forked-2xqhxc

PrimeReact version

10.3.3

React version

18.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

No response

Steps to reproduce the behavior

1. Fork sample code from PrimeReact docs website.
2. In App.jsx, replace parent node of TabView <div className="card"> with PrimeReact Dialog component.
3. Set Dialog props activeIndex to 2, onHide to an empty function.
4. Render the page.
5. The ink bar under the tab headers is in an incorrect position. It is shown in in the middle of 2nd tab header (tab index = 1).

Expected behavior

The ink bar's position should be fully under the 3rd tab header, when the TabView is first rendered.