.map函数返回后在Tabs中渲染组件

当我尝试在.map函数中呈现TabPane时，出现以下问题：我的组件（DepartmentView）仅针对第一个TabPane呈现，而下一个TabPane内容为空。 我正在使用ANT Design库。 我的问题是如何从.map函数为每个TabPane渲染DepartmentView？

 <Tabs tabPosition="left" className="tab-view-page">
  {
    data.map((item) => (
      <TabPane
        tab={(
          <CustomTabTitle
            title={item.name}
            subtitle=""
          />
        )}
        key={item.id}
      >
        <DepartmentView data={item} />
      </TabPane>
    ))
  }
</Tabs>

DepartmentView组件：

<div className="main-section">
    <div className="horizontal-tabs-container">
      <Tabs className="horizontal-tabs-profile">
        <TabPane tab={<FormattedHTMLMessage id="layout.tabs.overview" />} key="overview">
          Here will be overview page
        </TabPane>
        <TabPane tab={<FormattedHTMLMessage id="layout.tabs.staff" />} key="staff">
          <Employees />
        </TabPane>
        <TabPane tab={<FormattedHTMLMessage id="layout.tabs.settings" />} key="settings">
          <Settings />
        </TabPane>
      </Tabs>
    </div>
  </div>