reactjs - Mathquill を使用した数学関数の表示

Question

以下のコードを使用して、入力フィールドに数学関数を表示しています。ただし、この cos(√) のように関数を組み合わせて 1 つの方程式を作成するのではなく、各方程式は、すでに表示されているものの右側に追加されます。例: cos() √</p>

import React, {useState} from 'react'
import { addStyles, EditableMathField  } from 'react-mathquill'


addStyles();

function App(props) {
  const [latex, setLatex] = useState("");
  const injectMathFunction = (latexString) => {
    setLatex((latex) => latex + latexString);
  };
  return (
    <div>
      <EditableMathField
        latex={latex} // latex value for the input field
        onChange={(mathField) => {
          
          setLatex(mathField.latex());
        }}
      />
      <button onClick={() => injectMathFunction("{\\sqrt{}}")}>√&lt;/button>
      <button onClick={() => injectMathFunction("\\frac{}{}")}>/</button>

    </div>
  );
}

問題はコードのこの部分にあると思います

const injectMathFunction = (latexString) => {
    setLatex((latex) => latex + latexString);
  };