react-codemirror2 creating two editors

Question

I am using codemirror and react-codemirror2 to create code editor, I am using the Controlled component once but its showing two editors, When I type on the first editor it is reflecting on the 2nd one

Code:

import "codemirror/lib/codemirror.css";
import "codemirror/theme/eclipse.css";
import "codemirror/mode/javascript/javascript";
import { Controlled as REditor } from "react-codemirror2";

const CreatePolicy = () => {
    const [value, setValue] = useState<string>("");
    return (
    <div className="create-policy-container">
         <REditor
            className="code-mirror-wrapper"
            onBeforeChange={(editor, data, value) => {
               setValue(value);
             }}
            value={value}
            options={{
            lineWrapping: true,
            lint: true,
            mode: "css",
            theme: "eclipse",
            lineNumbers: true,
           }}
         /> 
    </div>
  );
};

export default CreatePolicy;

Answer 1

I was having the same issue. What I did to solve it was deleting the ReactStrictMode component from the Index.js file. Though I don't know why that works, for I only did what it said here

Answer 2

Just paste this in your css file ->

.react-codemirror2 > .CodeMirror:first-child { display: none; }