React reusable tab component

import { Tabs, Tab, TabPanel, TabList } from 'react-re-super-tabs'
import { Info, About } from '../information'
import CustomTab from '../CustomTab'

export default () => (
  <Tabs activeTab='about'>
    <TabList>
      <Tab component={() => <div>info</div>} id='info' />
      <Tab component={CustomTab} label='about' id='about' />
      <Tab component={() => <div>contact</div>} id='contact' />
    </TabList>
    <TabList>
      <TabPanel component={Info} id='info'/>
      <TabPanel component={About} id='about'/>
      <TabPanel component={() => <p>contact content ...</p>} id='contact' />
    </TabList>
  </Tabs>
)

<Tabs activeTab='about'>
  <TabList>
   ...
  </TabList>
  <TabList>
     ...
  </TabList>
</Tabs>

<Tabs activeTab='info'>
    <TabList>
      <Tab component={CustomTab} label='info' id='info' />
      ...
    </TabList>
    <TabList className={styles.list}>
        <TabPanel component={Info} id='info' />
        ...
    </TabList>
</Tabs>

<Tab component={() => <div>info</div>} id='info' /> 

const CustomTab = ({children, isActive}) =>
    <span className={`${styles.customTab} ${isActive ? styles.active : ''}`}>{children}</span>
    
    ...
<Tab component={CustomTab} id='info' /> 

<TabPanel component={() => <p>info content</p>} id='info' />

<TabPanel component={Info} id='info' />