Cursor not lining up with text and syntax highlighting, indent, etc not working

Reproduce the report using the Next.js configuration and the CodeEditor component shown in the issue, starting with the supplied JSON example. Compare cursor alignment, auto-indentation, and syntax highlighting while typing. The issue is complete when the cursor tracks the displayed text and the reported editor features work correctly in this setup.

If you look at the gif you can see that the cursor is actually above where the input appears. When you type it's really difficult to know where your input is going to appear and it seems erratic. Also the auto-indent doesn't seem to work and there's no syntax highlighting.

Here's my code:

import React, { useState } from 'react';
import dynamic from 'next/dynamic';

const ReactJson = dynamic(
  () => {
    return import('react-json-view');
  },
  { ssr: false },
);

const CodeEditor = dynamic(
  // @ts-ignore
  () => import("@uiw/react-textarea-code-editor").then((mod) => mod.default),
  { ssr: false }
);

function ConfigJsonViewerComponent(props: any) {
  const config: any = props.config;
  const [editableConfig, setEditableConfig] = useState(JSON.stringify(config, null,'\r'))

  function onEdit(editObj: any): boolean {
    setEditableConfig(editObj);
    return true;
  }

  // @ts-ignore
  return (
    <div>
        <div>
          <h3>
            Configuration <i>{edited ? '(edited)' : ''}</i>
          </h3>
          <CodeEditor
            // @ts-ignore
            value={editableConfig}
            language="json"
            placeholder={editableConfig}
            onChange={(e: any) => onEdit(e.target.value)}
            style={{
              fontSize: 12,
              backgroundColor: "#f5f5f5",
              fontFamily:
                "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace"
            }}
          />
        </div>
      )}
    </div>
  );
}

export default ConfigJsonViewerComponent;

This is a next.js app so my next.js config looks like this:

const removeImports = require("next-remove-imports")();
module.exports = removeImports({
  experimental: { esmExternals: true },
  distDir: 'build',
  webpack: config => {
    return {
      ...config,
      node: { __dirname: true },
    };
  }
});