Code mirror styling with class name not working

Question

Code mirror class name that styles code mirror component in NextJs is not working..... Please suggest a better solution other than the workaround below:

    <CodeMirror
      className={"CodeMirror"}
      height="200px"
      onBeforeChange={handleChange}
      value={value}
      options={{
        lineWrapping: true,
        lint: true,
        mode: language,
        // theme: "cobalt",
        lineNumbers: true,
      }}
    />

The above code will not change the height with the class name

.CodeMirror {
  height: 420px !important;
}

of course you need to set up your code mirror edit like this:

import dynamic from "next/dynamic";
import React from "react";

const CodeMirror = dynamic(
  async () => {
    await import("codemirror/lib/codemirror.css");
    await import("codemirror/mode/xml/xml");
    await import("codemirror/theme/material.css");
    //await import("codemirror/theme/cobalt.css");
    await import("codemirror/addon/search/match-highlighter");
    await import("codemirror/mode/javascript/javascript");
    await import("codemirror/mode/css/css");
    return import("react-codemirror");
  },
  { ssr: false }
);

const Editor = (props) => {
  const { language, value, onChange } = props;

  const handleChange = (e) => {
    onChange(value);
  };

  return (
    <CodeMirror
      // className={"CodeMirror"}
      height="200px"
      onBeforeChange={handleChange}
      value={value}
      options={{
        lineWrapping: true,
        lint: true,
        mode: language,
        // theme: "cobalt",
        lineNumbers: true,
      }}
    />
  );
};

export default Editor;

The only to style the component so far is to place the css class name called .CodeMirror in global.css in your styles.

.CodeMirror {
  height: 420px !important;
}

A fix of the classname would be better, but so far you can use the the workaround above.