Как сделать динамический рендеринг?

[gsdev99]

Всем привет. Ребята, подскажите, пожалуйста, как решить следующую задачу. Есть у меня компонент, который рендерит динамически компоненты по типу. Сейчас это происходит следующим образом: один под другим. Как в данном случае правильно сделать, если, мне нужно, чтобы компонент Title (все элементы) в section.
Что бы получилось, что-то вроде этого:

<main>
    <section>
        <Title />
        <Title />
        <Title />
    </section>

    <New />
</main>

Структуру данных менять нельзя.

const Factory = ({ widget }) => {
  const widgetType = widget.type.toLowerCase()
  
  const Component = components[widgetType]
  
  if (widgetType === 'title') {
    // я так понимаю, вот здесь должна быть логика
  }
  
  return (
    <Component widget={widget} />
  )
}

https://codepen.io/gsdev99/pen/bGdeWbw