Controlled Tabs in Panel don't update correctly

[ra-ch-b]

What version of rsuite are you using?

5.53.0

What version of React are you using?

18.2.0

What version of TypeScript are you using (if any)?

No response

What browser are you using?

Chrome

Describe the Bug

Tabs with controlled state as the child of a Panel don't appear to update correctly. Clicking a tab does not display its associated content, but instead that of the previously active tab.

Expected Behavior

Clicking a tab would update to the associated content.

To Reproduce

import { useState } from 'react';
import { Panel, Placeholder, Tabs } from 'rsuite';

function TestPanel() {
   const [activeKey, setActiveKey] = useState('1');

   const tabs = [
       {
           eventKey: '1',
           title: 'Image',
           content: <Placeholder.Paragraph graph="image" />,
       },
       {
           eventKey: '2',
           title: 'Square',
           content: <Placeholder.Paragraph graph="square" />,
       },
       {
           eventKey: '3',
           title: 'Circle',
           content: <Placeholder.Paragraph graph="circle" />,
       },
   ];

   return (
       <Panel bordered>
           <Tabs activeKey={activeKey} onSelect={setActiveKey}>
               {tabs.map((t) => (
                   <Tabs.Tab eventKey={t.eventKey} key={t.eventKey} title={t.title}>
                       {t.content}
                   </Tabs.Tab>
               ))}
           </Tabs>
       </Panel>
   );
}

With the above component, click through each tab in turn. The displayed content will be that of the previously active tab. From the initial state, clicking the "Square" tab doesn't change the tab content and the image placeholder is still visible. Next, clicking the "Circle" tab displays the square placeholder, which is the content of the previously active "Square" tab and not the expected content of the "Circle" tab.

[simonguo]

Fixed in #3610

https://rsuite-nextjs-git-fix-panel-rsuite.vercel.app/components/tabs/#controlled