@monaco-editor/react editor cursor is not positioning on the correct position

My monaco editor cursor is always placed before current character

for example if I am typing policy cursor should be placed after last char "y" but its placed after "o"

Basically it is creating two empty spaces before actual content typed

import React, { useState, useEffect, Dispatch, SetStateAction } from "react";
import { default as MonacoEditor, EditorProps } from "@monaco-editor/react";
import * as monaco from "monaco-editor";
type Dispatcher<S> = Dispatch<SetStateAction<S>>;


const MONACO_OPTIONS: monaco.editor.IEditorConstructionOptions = {
   autoIndent: "full",
   automaticLayout: true,
   contextmenu: true,
   fontFamily: "monospace",
   fontSize: 13,
   lineHeight: 24,
   hideCursorInOverviewRuler: true,
   matchBrackets: "always",
   minimap: {
     enabled: false,
   },
   readOnly: false,
   scrollbar: {
     horizontalSliderSize: 4,
     verticalSliderSize: 18,
   },
 };

 interface propsDo{
   regoCode: string | undefined,
   setRegoCode: Dispatcher<string | undefined>

 }
 export const Editor = ({regoCode, setRegoCode}:propsDo) => {
    const [fileName, setFileName] = useState("script.js");

   const handleEditorChange = (
     value?: string,
     event?: monaco.editor.IModelContentChangedEvent
   ) => {
     setRegoCode(value);
     console.log(regoCode);
   };

   return (
     <>
       <MonacoEditor
         height="70vh"
         width="70vw"
         theme="vs-dark"
         path={file.name}
         defaultLanguage={file.language}
         options={MONACO_OPTIONS}
         onChange={handleEditorChange}
       />
    </>
   );
};