Monaco editor does not accept colors

I am using react-monaco-editor and for syntax highlighting like vscode, I am using vscode-oniguruma and vscode-textmate. When I run this, https://github.com/bolinfest/monaco-tm, everything goes perfectly(which is implemented using monaco-editor). But if I try this using react-monaco-editor in nextjs, highlighting works sometimes, and doesnt work sometimes.

Can anyone tell me what is the problem??

import React, { useState, useEffect, useRef } from "react";
import dynamic from "next/dynamic";

import { setformatter } from "../actions/getdataaction";
import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
import {
  createOnigScanner,
  createOnigString,
  loadWASM,
} from "vscode-oniguruma";
import { SimpleLanguageInfoProvider } from "./providers";
import { registerLanguages } from "./register";
import { rehydrateRegexps } from "./configuration";
import VsCodeDarkTheme from "./vs-dark-plus-theme";
import { html, scss, css, javascript, typescript, python } from "./samplecode";

const MonacoEditor = dynamic(import("react-monaco-editor"), { ssr: false });
let changescontent = [];
let cursorposition = 1;

function Editor(props) {
  var language = props.extension;

  const editorRef = useRef(null);
  const monacoRef = useRef(null);
  var code =
    language === "html"
      ? html
      : language === "css"
      ? css
      : language === "scss"
      ? scss
      : language === "javascript"
      ? javascript
      : language === "typescript"
      ? typescript
      : language === "python"
      ? python
      : "";
  const [editorContent, setEditorContent] = useState(code);
  useEffect(() => {
    main();
  }, []);

  async function main() {
    const data = await loadVSCodeOnigurumWASM();
    if (props.openFiles.length === 1) {
      loadWASM(data);
    }
  }
  const languages = [
    {
      id: "python",
      extensions: [".py"],
      aliases: ["Python", "py"],
      filenames: ["Snakefile", "BUILD", "BUCK", "TARGETS"],
      firstLine: "^#!\\s*/?.*\\bpython[0-9.-]*\\b",
    },
    {
      id: "javascript",
      extensions: [".js", ".jsx"],
      aliases: ["Javascript", "JS", "js"],
      filenames: ["Snakefile", "BUILD", "BUCK", "TARGETS"],
    },
    {
      id: "css",
      extensions: [".css"],
      aliases: ["CSS", "css"],
      filenames: ["Snakefile", "BUILD", "BUCK", "TARGETS"],
    },
    {
      id: "scss",
      extensions: [".scss", ".sass"],
      aliases: ["SCSS", "scss", "sass"],
      filenames: ["Snakefile", "BUILD", "BUCK", "TARGETS"],
    },
    {
      id: "html",
      extensions: [".html"],
      aliases: ["HTML", "html"],
      filenames: ["Snakefile", "BUILD", "BUCK", "TARGETS"],
    },
    {
      id: "typescript",
      extensions: [".ts", ".tsx"],
      aliases: ["Typescript", "TS", "ts"],
      filenames: ["Snakefile", "BUILD", "BUCK", "TARGETS"],
    },
    {
      id: "json",
      extensions: [".json"],
      aliases: ["JSON", "json"],
      filenames: ["Snakefile", "BUILD", "BUCK", "TARGETS"],
    },
  ];
  const grammars = {
    "source.py": {
      language: "python",
      path: "python.tmLanguage.json",
    },
    "source.js": {
      language: "javascript",
      path: "javascript.tmLanguage.json",
    },
    "source.css": {
      language: "css",
      path: "css.tmLanguage.json",
    },
    "source.css.scss": {
      language: "scss",
      path: "scss.tmLanguage.json",
    },
    "text.html.basic": {
      language: "html",
      path: "html.tmLanguage.json",
    },
    "source.ts": {
      language: "typescript",
      path: "typescript.tmLanguage.json",
    },
    "source.json": {
      language: "json",
      path: "json.tmLanguage.json",
    },
  };

  const fetchGrammar = async (scopeName) => {
    const { path } = grammars[scopeName];
    const uri = `grammars/${path}`;
    const response = await fetch(uri);
    const grammar = await response.text();
    const type = path.endsWith(".json") ? "json" : "plist";
    return { type, grammar };
  };

  const fetchConfiguration = async (language) => {
    const uri = `configurations/${language}.json`;
    // console.log(uri, "uri fetchConfiguration");
    const response = await fetch(uri);
    const rawConfiguration = await response.text();
    return rehydrateRegexps(rawConfiguration);
  };

  const onigLib = Promise.resolve({
    createOnigScanner,
    createOnigString,
  });
  const provider = new SimpleLanguageInfoProvider({
    grammars,
    fetchGrammar,
    configurations: languages.map((language) => language.id),
    fetchConfiguration,
    theme: VsCodeDarkTheme,
    onigLib,
    monaco,
  });
  registerLanguages(
    languages,
    (language) => provider.fetchLanguageInfo(language),
    monaco
  );

  async function loadVSCodeOnigurumWASM() {
    const response = await fetch("release/onig.wasm");
    const contentType = response.headers.get("content-type");
    // console.log(response, contentType, "loadVSCodeOnigurumWASM()");
    if (contentType === "application/wasm") {
      return response;
    }

    return await response.arrayBuffer();
  }

  return (
    <>
      <div style={{ width: "100%", height: "100%" }}>
        <MonacoEditor
          editorDidMount={(editor, monaco) => {
            editorRef.current = editor;
            monacoRef.current = monaco;
            provider.injectCSS();
          }}
          width="100%"
          height="560"
          language={language}
          theme="vs-dark"
          value={editorContent}
          options={{
            minimap: {
              enabled: false,
            },
          }}
        />
      </div>
    </>
  );
}
export default Editor;