Monaco editor does not accept colors - reactjs

Question

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;