Render parts of template literal bold and create new lines

Question

Using JS and relatively new to it:

I'm trying to render two variables in bold that are within a template literal. They're taken from input fields, so when the user publishes their input the toValue and fromValue variables render in bold. I'd also like it to render with line breaks:

    const inputField = document.getElementById("input-field")
    const toField = document.getElementById("to-field")
    const fromField = document.getElementById("from-field")

    publishBtn.addEventListener("click", function() {
        let toValue = toField.value
        let inputValue = inputField.value
        let fromValue = fromField.value

        let baseString = `Dear ${toValue},
        ${inputValue}
        From ${fromValue}`

        push(endorsementInDB, baseString)
    })

Line breaks: neither manually adding them in nor using \n is working. Bold output: I've tried creating new variables with .bold() but that didn't work.