Quiero hacer que la función de cierre automático del corchete dentro del área de texto use reaccionar. El cursor debe estar dentro del corchete después del cierre automático. Pero cuando se llama a la función, el cursor va al final del valor del área de texto. No tengo idea de por qué sucede y no hay una solución funcional para configurar el cursor. ¿Cómo puedo resolverlo?

Estoy usando el Editor de '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)} /> <...>