在我的应用程序中，我正在使用react-tabs创建标签导航。 TabList：

存在于Tab组件内部，如下所示

import React,{ Component } from 'react';
import { render } from 'react-dom';
import { Tab,Tabs,TabList,TabPanel } from 'react-tabs';

class App extends Component {
  render() {
    return (
        <Tabs>
          <TabList>
            <Tab>Title 1</Tab>
            <Tab>Title 2</Tab>
            <Tab>Title 3</Tab>
          </TabList>
          <TabPanel>
            <h2>Any content 1</h2>
          </TabPanel>
          <TabPanel>
            <h2>Any content 2</h2>
          </TabPanel>
          <TabPanel>
            <h2>Any content 3</h2>
          </TabPanel>
        </Tabs>
    );
  }
}

render(<App />,document.getElementById('root'));

但是在我的项目中，我有一个类似Tablist之类的要求将从下面的另一个组件中返回。在这种情况下，它不起作用：

import React,TabPanel } from 'react-tabs';

const List = () => {
  return (
      <TabList>
        <Tab>Title 1</Tab>
        <Tab>Title 2</Tab>
        <Tab>Title 3</Tab>
      </TabList>
  )
}

class App extends Component {
  render() {
    return (
        <Tabs>
          <List />
          <TabPanel>
            <h2>Any content 1</h2>
          </TabPanel>
          <TabPanel>
            <h2>Any content 2</h2>
          </TabPanel>
          <TabPanel>
            <h2>Any content 3</h2>
          </TabPanel>
        </Tabs>
    );
  }
}

render(<App />,document.getElementById('root'));

如何解决以上问题？