const TabsRR = ({ tabs, name, renderActiveTabContentOnly }) => {
  const tabLinks = [];
  const tabContents = [];

  tabs.forEach((tab, index) => {
    tabLinks.push(
      <TabLink
        key={index}
        to={tab.id}
        style={styles.tabLink}>
        {tab.label}
      </TabLink>
    );

    tabContents.push(
      <TabContent
        key={index}
        for={tab.id}>
        {tab.content}
      </TabContent>
    );
  });

  return (
    <Tabs
      name={name}
      renderActiveTabContentOnly={renderActiveTabContentOnly}
      activeLinkStyle={styles.activeLinkStyle}
      visibleTabStyle={styles.visibleTabStyle}
      style={styles.tabs}>
      <div className={styles.links}>
        {tabLinks}
      </div>
      <div className={styles.content}>
        {tabContents}
      </div>
    </Tabs>
  )
}