Unable to use Conditional in Javascript HTML Population function

I'm trying to check for a blank variable, and have it output either a variable surrounded by parentheses, or if the variable is blank, have no output. The issue is that I need other text/values beforehand so I can't just leave out an element. The code currently just outputs the conditional as text.

Simplified/Cut down code:

function populateSpells(jsonResponse) {
    var data = JSON.parse(jsonResponse.srcElement.response)
    spells = document.getElementById("spellList")
    spells.innerHTML = ''
    data.spells.forEach(spell => {
        spells.innerHTML +=`<div>
    <div class="expBody">
        <p class="spellDispDescExp">Components: ${spell.components} spell.material != "" ? '(${spell.material})' : ''</p>
      </div>
    </div>
    `
}

Current output is Components: V, S, M spell.material != ? '(a tiny ball of of bat guano':"