Nested conditional rendering produces weird behavior

<div class="page-content infinite-scroll-content" data-infinite-distance="50" @infinite=${loadMore}>
    ${, index) => $h`
    <div class="block-title">HEADER</div>
    <div class="list media-list list-strong list-outline-ios list-dividers-ios inset-md">
        ${ => $h`
        <li class="swipeout" @swipeout:deleted=${onDeleted}>
          <div class="swipeout-content">
            <a class="item-link item-content">
              <div class="item-media"><i class="material-icons md-only">house</i></div>
              <div class="item-inner">
                <div class="item-title-row">
                  <div class="item-title">${}</div>
                  <div class="item-after">${item.amount}</div>
                <div class="item-subtitle">${item.note}</div>
                <div class="item-text">${item.accDisplay} ${item.time}</div>
          <div class="swipeout-actions-right">
    ${hasMoreItems && $h`
    <div class="preloader infinite-scroll-preloader"></div>

The code uses nested mapping for rendering a nested array’s contents, in this case groupedByDays array. It is just an array containing a number of sub-arrays. The nesting seems to work mostly, however, the <div class="block-title">HEADER</div> is being rendered as <div class="block-title"><span class="preloader-inner"><svg viewBox="0 0 36 36"><circle cx="18" cy="18" r="16"></circle></svg></span>HEADER</div> which results in a huge preloader being displayed.

Any suggestions on how to accomplish the rendering of nested arrays (being updated repeatedly)?
Goal is this:

Thank you!

Render function can return only single child

Thanks for getting back to me! I am not sure whether I understand you correctly: how do I return more than one child? It is just nesting it by using object array properties as it is shown in the docs.

I appreciate any help!