Incorrect cursor position

I am using react-md-editor in my nextjs application but while typing, my cursor position is not correct.

https://github.com/uiwjs/react-md-editor/assets/76780858/6331c96c-1c01-4dc9-a949-608714b229cc

Here is my code :

"use client";
import "@uiw/react-md-editor/markdown-editor.css";
import "@uiw/react-markdown-preview/markdown.css";
import dynamic from "next/dynamic";
import { useState } from "react";

const MDEditor = dynamic(() => import("@uiw/react-md-editor"), { ssr: false });
function Editor() {
  const [value, setValue] = useState("**Hello world!!!**");
  return (
    <div data-color-mode="dark">
      <MDEditor
        autoFocus="on"
        key={1}
        tabSize={4}
        value={value}
        onChange={setValue}
      />
    </div>
  );
}

export default Editor;

Start by reproducing the cursor-position problem with the provided Next.js Editor component and inspect the editor's cursor handling. Done means the cursor stays at the intended position while typing in the shown configuration.