reactjs：未在大括号中提供输入时组件不呈现

如何解决reactjs：未在大括号中提供输入时组件不呈现

我正在尝试从库中渲染一个组件 reacts-mathquill

import { addStyles,EditableMathField,StaticMathField } from 'react-mathquill'

function randomNum(min,max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

  const [variables,setvariables] = useState({
                        a: randomNum(2,9),b: randomNum(1,c: randomNum(2,9)
                      })

  function refreshVariables(){

     setvariables({
                 a: randomNum(2,9)
               })
  }



<button onClick= {refreshVariables}>Refresh</button>

// this one re renders when i press refresh button
<StaticMathField>{`${variables.a} + ${variables.b} + ${variables.c}`}</StaticMathField><br></br>


// this one does not rerender
<StaticMathField>{variables.a} + {variables.b} + ${variables.c}</StaticMathField>

有什么区别，为什么一个渲染而另一个不渲染

为什么下面的样式会重新渲染

<StaticMathField>{`${state_variable}`}</StaticMathField>

而这不是

<StaticMathField>{state_variable}</StaticMathField>