I want to make bracket auto closing function inside textarea using react. The cursor should be inside the bracket after auto closing. But when the function is called, cursor go to the end of the textarea value. I have no idea why it happens and there is no working solution about setting cursor. How can I solve it?

I'm using Editor from 'react-simple-code-editor'

 function bracketClose(e) {
    var selectPos=e.target.selectionStart;
    var wholeText=document.getElementById("solution").value;
    var beforeText=wholeText.substring(0,selectPos);
    var closeBracket="";
    var afterText=wholeText.substring(selectPos,wholeText.lenth);
    const close=e.key;

    if(close==="["){
      closeBracket="]";
    }
    else if (close==="{"){
      closeBracket="}";
    }
    else if (close==="<"){
      closeBracket=">";
    }
    else if (close==="("){
      closeBracket=")";
    }
    else if (close==="'"){
      closeBracket="'";
    }
    else if(close==="\""){
      closeBracket="\"";
    }

    wholeText= beforeText+closeBracket+afterText;
    setCode(wholeText);
    e.target.setSelectionRange(selectPos,selectPos);
    document.getElementById("solution").focus();
  };

<...>
 <Editor
    className="editor"
    textareaId="solution"
    value={code}
    onKeyUp={bracketClose}
    onValueChange={code => setCode(code)}
    highlight={code => hightlightWithLineNumbers(code, languages.js)}
 />
<...>