Литералы шаблонов ES6 (строка шаблона) в проекте React of ASP.NET Core

Я использовал React в проекте ASP.NET Core, где я застрял в одном месте, где мне нужно, чтобы одна часть имени класса была динамической, а другая часть должна быть постоянной. Литералы шаблонов могут достичь моего варианта использования, но я не понимаю, как я могу использовать его в своем проекте. То, чего я хочу достичь, приведено ниже

<Button
    size="lg"
    className=`${this.state.btnColor} p-3 m-3`
    onClick={() => this.showForm()}
>

В приведенном выше примере btnColor будет содержать цвет, который я изменю в соответствии с взаимодействием с пользователем, но отступы и поля должны быть сохранены как есть. Когда я использовал приведенный выше код, он выдал ошибку.

Я знаю об атрибуте CSS background, но я хочу использовать имена классов начальной загрузки. Когда я изменю состояние btnColor, цвет кнопки изменится.

Как я могу использовать функцию ES6 Template Literal в проекте React of ASP.NET Core?