Adding Fraction to mathquill editor using a add fraction button in React

Question

const EditableMathField = dynamic(() =\> import("react-mathquill"), {
ssr: false,
});

function MathInput({ onEnterDown, index, onValueChange }) {

...
const handleAddFraction = () => {
mathInputRef.current.firstChild.firstChild.firstChild.value = "/";

    const event = new Event("input", {
      bubbles: true,
      cancelable: true,
    });
    
    mathInputRef.current.firstChild.firstChild.firstChild.dispatchEvent(event);
    mathInputRef.current.firstChild.firstChild.firstChild.focus();
    setIsFocused(true);

};
...
export default MathInput;

This is the MathInput component and there is a line when I run this project. When I press enter, a new mathquill editor will be made below the line. And when I focus on a line, Add Fraction button appear.

All works well, but adding fraction doesn't work at the first time of the first line. Once I edit the first line for example I press 'a', the adding fraction works well. And of course from the second line, it works well.

I used this to add fraction. When the fraction added, the cursor is on the numerator of a fraction.