Julia Ovod

Попробую вам помочь. Если у вас вкладок немного, то чтобы не городить 12 пропсов, можно использовать такой подход:

const UserTabs = () => (
  <Tabs>
    <Tab
      name={name}
      tooltipText={tooltipText}
      onTabClick={onTabClick}
    />
    <Tab
      name={name}
      tooltipText={tooltipText}
      onTabClick={onTabClick}
    />
  </Tabs>
);

По возможности постарайтесь инкаспулировать данные внутри UserTabs и попробуйте решить проблему через композицию.

Если не получится (например, вкладок много или вы заранее не знаете данных), то можно так (то есть как вы и сказали передать массив tabs и с помощью итерации создать компонеты Tabs внутри UserTabs):

const createTabs = (tab) => tabs.map((tab) => {
  <Tab
    name={tab.name}
    tooltipText={tab.tooltipText}
    onTabClick={tab.onTabClick}
  />
});

const UserTabs = ({ tabs }) => <Tabs tabs={createTabs(tabs)} />;

Подробнее о композиции можно почитать в документации.