Creates two div with class: CodeMirror cm-s-default

[muratsesen]

When I implement the basic example in a newly created react app, it creates two separate text fields inside the editor. This is really weird. It looks like this:

Toolbar section

| 1 | #this is a text field which can be edited | 1 | #this is another text field which is also editable

[jaywcjlove]

@muratsesen I didn't understand what you meant

[berkaycimsir]

i also faced with this issue i fixed it with hiding the last one by the css below

    '.cm-s-default:last-child': {
          display: 'none !important',
     },

also i realized that it does not create the second one in production, creates in only local

so i am using this in my project

const StyledMarkdownEditor = styled(MarkdownEditor)({
  ...(!prod
    ? {
        '.cm-s-default:last-child': {
          display: 'none !important',
        },
      }
    : {}),
});

my package versions

    "@uiw/react-markdown-editor": "^4.0.3",
    "next": "latest",
    "next-remove-imports": "^1.0.6",
    "react": "latest",

screenshot of the issue

also there is an another issue, if i hit enter one time the space does not apply. i need to hit two times to enter to put space check screenshot below