Как разделить логику рендера в React.js?

[gsdev99]

Ребята, подскажите, как правильно сделать?
Есть линейный список виджетов. В цикле я их перебираю и в зависимости от типа отрисовываю какой компонент. Т.е. backend рулит порядком отображения. Но, выходит, что некоторые типы виджетов мне нужно поместить в div.
Например

section - Header
div
    section - Title
    section - Title
section - New
div
    section - Footer
    section - Footer

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