TabPanel: dynamic add/close weird behavior

[djapal]

Describe the bug

Unless there is something I'm missing here, I want to have a static tab panel (or a button) with a list of items and when i click then the item should be displayed on a new tab.
This is OK but when i want to close the tab, then weird things happen.

Here is a sample

https://codesandbox.io/s/eloquent-roentgen-d9ss7y?file=/src/demo/TabViewDemo.js

When i click an item to be closed, then 2 tabs are closed.
If i remove the line which updates the list of tabs, it works fine, but this means that

{tabPanels.map((tab) => { return ( <TabPanel closable header={tab.header} key={tab.id}> {tab.body} </TabPanel> ); })}

this is ignored and only applied at first render.
How can we update the component based on the list that we provide in map function? Does tab panel depend on another internal list?

Reproducer

https://codesandbox.io/s/eloquent-roentgen-d9ss7y?file=/src/demo/TabViewDemo.js

PrimeReact version

9.6.0

React version

18.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

Firefox 114

Steps to reproduce the behavior

Just click the Tab 1 to be removed. Tab 2 is also removed.

Expected behavior

Only 1 tab at a time should be closed. Removing line
setTabPanels(tabPanels.filter((p, i) => i !== e.index - 1)); makes things work but the point is to depend on the dynamically changed list of tabs.

[melloware]

Duplicate of: #2842

There is an open PR to fix it which has not been reviewed by PrimeTek.

[djapal]

Duplicate of: #2842

There is an open PR to fix it which has not been reviewed by PrimeTek.

sorry i saw another related issue and thought this was a different one. thank you

[melloware]

I linked that PR to this ticket as well so we know in the future.