Text Cursor place changing because of AutoClosing Tags/Brackets in CodeMirror

Question

I'm using CodeMirror to create an in-browser IDE. I'm using autoCloseTags and autoCloseBrackets. But whenever I use it, the text cursor gets misplaced at either the end of the line (after the closing tag/bracket) or one/two characters before the opening bracket.

I noticed that it works when I use unControlledEditorComponent. But since I have HTML, CSS, and Javascript, I must use ControlledEditorComponent.

Editor.jsx

import React, { useState } from 'react';
import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/dracula.css';
import 'codemirror/theme/material.css';
import 'codemirror/theme/mdn-like.css';
import 'codemirror/theme/the-matrix.css';
import 'codemirror/theme/night.css';
import 'codemirror/mode/xml/xml';
import 'codemirror/mode/javascript/javascript';
import 'codemirror/mode/css/css';
import { Controlled as ControlledEditorComponent } from 'react-codemirror2';

const Editor = ({ language, value, setEditorState }) => {
  const [theme, setTheme] = useState("dracula")
  const handleChange = (editor, data, value) => {
    setEditorState(value);
    editor.showHint( {completeSingle: false} );
  }
  const themeArray = ['dracula', 'material', 'mdn-like', 'the-matrix', 'night']
  return (
    <div className="editor-container">
      <div style={{marginBottom: "10px"}}>
        <label for="themes">Choose a theme: </label>
        <select name="theme" onChange={(el) => {
          setTheme(el.target.value)
        }}>
          {
            themeArray.map( theme => (
              <option value={theme}>{theme}</option>
            ))
          }
        </select>
      </div>
      <ControlledEditorComponent
        onBeforeChange={handleChange}
        value= {value}
        className="code-mirror-wrapper"
        options={{
          lineWrapping: true,
          lint: true,
          mode: language,
          lineNumbers: true,
          theme: theme,
          autoCloseBrackets: true,
          autoCloseTags: true,
          matchBrackets: false,
          matchTags: false,
          foldGutter: false,
          extraKeys: { 
            "Ctrl-Space": "autocomplete", 
          }
        }}
      />
    </div>
  )
}