Codemirror not positioning my cursor properly

[SamarthMayya]

I recently installed codemirror and tried to get it working. But for some reason, the cursor always shows up at the middle of the editor, instead of the left.
Here is my editor code:

import { Controlled as ControlledEditor } from "react-codemirror2";
import "codemirror/lib/codemirror.css"
import "codemirror/theme/material.css"
import "codemirror/theme/neat.css"
import 'codemirror/addon/edit/closebrackets';
import 'codemirror/addon/edit/closetag';
import 'codemirror/addon/lint/lint';
import 'codemirror/addon/lint/lint.css'
import 'codemirror/addon/lint/javascript-lint'
import "codemirror/mode/xml/xml"
import "codemirror/mode/css/css"
import "codemirror/mode/javascript/javascript"

function Editor(props) {
    return (
        <div>
            <ControlledEditor
                onBeforeChange={(editor, data, value) => props.setValue(value)}
                value={props.value}
                className="code-mirror-wrapper"
                options={props.options}
            />
        </div>
    );
}

export default Editor;

And here is my App.js code:

import logo from '../../assets/images/logo.svg';
import './App.css';
import Editor from '../editor/Editor';
import { useState } from 'react';

function App() {
  const [xmlvalue, setXmlValue] = useState(null);
  const [cssvalue, setCssValue] = useState(null);
  const [jsvalue, setJsValue] = useState(null);

  return (
    <div className="App">
      {/* <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header> */}
      <div className='pane top-pane'>
        <Editor 
          options={{
            lineWrapping: true,
            lint: true,
            mode: 'xml',
            lineNumbers: true,
            theme: 'material',
            autoCloseTags: true,
            autoCloseBrackets: true
          }}
          setValue={setXmlValue}
          value={xmlvalue}
          /*HTML code editor*/ 
        />
      </div>

      <div className='bottom-pane'>
        
      </div>
    </div>
  );
}

export default App;

And these are the versions:

"dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.36",
    "@fortawesome/free-brands-svg-icons": "^5.15.4",
    "@fortawesome/free-solid-svg-icons": "^5.15.4",
    "@fortawesome/react-fontawesome": "^0.1.16",
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "codemirror": "^5.65.1",
    "react": "^17.0.2",
    "react-codemirror2": "^7.2.1",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.4"
  }

Can someone please help me here?

[SamarthMayya]

Here is a screenshot of the screen:

[SamarthMayya]

Never mind, in App.css, there's a line by default that aligns text to the center:

.App {
    text-align: center
}