Active tabs changing itself after pressed

[Criezc]

Hi, I got a question about headless UI Tabs. I'm trying to use the tabs as navigation and the tab is wrapped with react-router-dom . I able to rendered the child perfectly according to the params. but after I pressed the tabs, its changed to the 0 index like this screenshots

I don't know how to solve this, there is no enough docs for me. Thank you