Templating KaTex String through Javascript template literals

Question

I have got KaTeX strings which I'm trying to template through javascript template literals. But the results are not rendered properly instead the raw strings $$10 b^2$$ sq. units are displayed in the UI. I have got the required Js files in the script tag of the HTML file.

<script [email protected]("katex/katex.min.js")></script>
<script [email protected]("katex/contrib/auto-render.min.js")></script>

I'm using Scala playframework which supports templating. Playframework templating works whereas templating through Javascript doesn't. I'm not sure where the issue occurs.

Rendering works correctly for function getStudentQuestionPrompt but the issue occurs with getAnswerColumnForQuestion. This is the segment of code that I'm trying to use.

function getQuestionBodyString(question, conceptInfo) {
    return ` 
      <tr>
        <td> ${question.questionId} </td>
        <td><form class="form-inline">${getStudentQuestionPrompt(question)}</form>
        <td> ${getAnswerColumnForQuestion(question)} </td>
      </tr>
    `
}

function getAnswerColumnForQuestion(question) {
    let answerHTML = `${getAnswerForMCQ(question)}`;
    return answerHTML;
}

function getAnswerForMCQ(question) {
    return "$$10 b^2$$";
}