Template literal rendering HTML as text

I am updating a Framework7 based App. Previously it used a templating library called Template7 (similar to Handlebars). I am now converting those templates to template literals. Everything works so far except one section of my template renders as text (escaped HTML) rather than HTML.

I’m new to template literals and any help would be appreciated.

The template uses JSON data that looks like below (antibiotics).
some items have just 1 concentration as shown in the first item "concentration": "50", and other have multiple concentrations,

as in the second item

"concSelect": [ { "name": "50mg/", "perml": "ml", "value": 50 }, { "name": "50mg", "perml": " tab", "value": 50 },

var antibiotics =   [
{
"concentration": "50",
"class": "drug",
"appendvol": "ml",
"doseper": "10",
"calcID": "Amikacin2",
"dosemax": "30",
"color": "green",
"dosemin": "10",
"hide": "",
"perkg": "mg/kg",
"appendose": "mg",
"dosestep": "1",
"calc": "Amikacin",
"decimal": "2",
"name": "Amikacin",
"perml": "mg/ml",
"category": "Antibiotic",
"multiply": "",
"dosevalue": "10",
"route": "IV,IM,SQ BID",
"group": ""
},
{
"concentration": "50",
"class": "drug",
"calcID": "Amoxicillin2",
"dosemax": "22",
"perml": "mg/ml",
"perkg": "mg/kg",
"name": "Amoxicillin",
"group": "",
"decimal": "2",
"doseper": "11",
"dosemin": "11",
"color": "green",
"appendvol": " ",
"hide": "",
"appendose": "mg",
"dosestep": "1",
"calc": "Amoxicillin",
"route": "BID",
"concSelect": [
  {
    "name": "50mg/",
    "perml": "ml",
    "value": 50
  },
  {
    "name": "50mg",
    "perml": " tab",
    "value": 50
  },
  {
    "name": "100mg",
    "perml": " tab",
    "value": 100
  },
  {
    "name": "150mg",
    "perml": " tab",
    "value": 150
  }
  ],
 "category": "Antibiotic",
 "multiply": "",
 "dosevalue": "11"
  },
  ...

The template literal code I am having issues with is:

${antibiotics.map((antibiotic) => $h`

...
<div class="inline-flex relative px-2 font-bold">
 ${antibiotic.concSelect ? `<form id="formSearchSelect-${antibiotic.calcID}" class="${antibiotic.concSelect ? '' : 'hide'} form-store-data">
<select class="conc form-select" data-drugToChange=".input-${antibiotic.calcID}" name="select${antibiotic.calcID}">

${antibiotic.concSelect.map(conc => `<option data-drugType="${conc.perml}" value=" ${conc.value}">${conc.name} ${conc.perml}</option>`).join('')}
  </select></form>` : `${antibiotic.concentration} ${antibiotic.perml}`}

</div>
 ... 
 `)}

It renders on the page as text and the rendered htmllooks like this:

<form id="formSearchSelect-Ampicillin2" class=" md:flex form-store-data relative  print:inline-flex"><select class="conc dark:text-white dark:bg-black form-select blocked transition duration-150 ease-in-out sm:text-sm sm:leading-5 font-bold print:px-1 print:pr-2 print:border-none print:shadow-none print:bg-white print:text-black" data-drugToChange=".input-Ampicillin2" name="selectAmpicillin2"><option  data-drugType="ml" value=" 100">100mg/ ml</option><option  data-drugType="ml" value=" 250">250mg/ ml</option><option  data-drugType=" cap" value=" 125">125mg  cap</option><option  data-drugType=" cap" value=" 250">250mg  cap</option><option  data-drugType=" cap" value=" 500">500mg  cap</option>
  </select></form>