Vdom nested "if" outputs false

the ${item2.txt && $h`… renders “false” in the map-loop if it is not true. why does it do that and how can i prevent it? This only happens if it is nested in map-loop. i am using f7-v6

${item.doc.messages.map((item2, k2) => $h`
                ${item2.txt && $h`
                  <p class="${item2.origin != 'user' ? 'to-bg' : 'from-bg'}">
                    <span title="${app.f7.mod.helper.showDate(item2.d_created)}">${app.f7.mod.helper.showTime(item2.d_created)}</span>
                    <span>${app.f7.mod.helper.nl2br(item2.txt)}</span>
                    <span class="flex-break"></span>
                    ${item2.tmpPics && $h`
                    ${item2.tmpPics.map((item) => $h`
                      <img @click="${() => big()}" src="data:{{item2.type}};base64,{{item2.data}}"/>
                    `)}
                    `}
                  </p>
                `}
              `)}
${item.doc.messages.map((item2, k2) => item2.txt ? $h`
    <p class="${item2.origin != 'user' ? 'to-bg' : 'from-bg'}">
      <span title="${app.f7.mod.helper.showDate(item2.d_created)}">${app.f7.mod.helper.showTime(item2.d_created)}</span>
      <span>${app.f7.mod.helper.nl2br(item2.txt)}</span>
      <span class="flex-break"></span>
      ${item2.tmpPics && $h`
      ${item2.tmpPics.map((item) => $h`
        <img @click="${() => big()}" src="data:{{item2.type}};base64,{{item2.data}}"/>
      `)}
      `}
    </p>
  ` : undefined
)}

false is a value and it will be outputted. This how JavaScript works, try in console:

console.log(false && 'something')

i replace “undefined” with ‘’ so nothing is rendered like requested