Реакция не строит должным образом. Возможно что-то с компонентами функции (?)

Question

Мой компонент работает просто отлично, но моя проблема - здание. Есть ли специальный загрузчик, который мне нужен для этой работы?

У меня есть такой компонент функции, который использует компонент под названием <Tabs>. Этот компонент <Tabs> поступает из модуля npm. И документация говорит, что я должен добавить объект, такой как tabsContent, как потомок <Tabs>

const ParentComponent = () => {
  const tabsData = [
    { title: 'One title' key: 'firstKey' },
    { title: 'Another title', key: 'secondKey' },
  ];

  const tabsContent = {
    firstKey: () => <FirstComponent />,
    secondKey: () => <SecondComponent />,
  };

  return (
    <Tabs data={tabsData}>
      {tabsContent}
    </Tabs>
  );
}

Сборка выдает мне ошибку, когда у меня есть эти <FirstCompoent /> и <SecondCompoent />, что также finction-components, но он работает, когда я обмениваю их с обычными <div>. Есть ли какая-то причина для этого? Код работает как положено. Ошибка, которую я получаю, выглядит примерно так:

| var ParentComponent = function ParentComponent((_temp2 = (_temp = _ref, _ref3 = <FirstCompoent></FirstCompoent>, _temp), _ref4 = <SecondCompoent></SecondCompoent>, _tem
p2)) {
|   var _temp, _ref3, _temp2, _ref4;