Monaco Editor is not showing the colors, only white color is showing

Question

I implemented monaco editor in my react application, but It's just showing one color, I am unable to figure it out. I have also tried using the by default theme as well, without custom theme, still Its the same problem

monaco.editor.defineTheme('customTheme', {
  base: 'vs-dark',
  inherit: true,
  rules: [
    { token: 'green', background: '#457EFF', foreground: '#457EFF' },
    {
      token: 'red',
      background: '#457EFF',
      foreground: '#457EFF',
    },
    { token: 'green', background: '#900000', foreground: '900000' },
  ],
  colors: {
    'editor.background': '#0C0F17',
  },
});
if (monacoEl.current) {
  setEditor(
    monaco.editor.create(monacoEl.current!, {
      readOnly: false,
      value: ["function DestinationCard() {\n\talert('Hello DestinationCard!');\n}"].join('\n'),
      // automaticLayout: true,
      language: 'typescript',
      // theme: 'vs-dark',
      theme: 'customTheme',
      minimap: {
        enabled: false,
      },
    }),
  );
}

<div className={style.codeView} ref={monacoEl as RefObject<HTMLDivElement>} />