I'm working on a Next.js 15 project and using @monaco-editor/react to implement a code editor with a custom One Dark Pro theme. However, the theme is not applying properly.

I tried creating a .json theme file and defined my theme on mount:

import OneDarkPro from './themes/atom-dark.json';


interface CodeEditorProps {
  defaultTheme?: 'vs-light' | 'vs-dark' | 'hc-black' | 'hc-light' | 'atom-dark';
}

const themes = [
  { value: 'vs-light', label: 'Light' },
  { value: 'vs-dark', label: 'Dark' },
  { value: 'hc-black', label: 'High Contrast Black' },
  { value: 'hc-light', label: 'High Contrast Light' },
  { value: 'atom-dark', label: 'One Dark Pro' },
];

type Theme = 'vs-light' | 'vs-dark' | 'hc-black' | 'hc-light' | 'atom-dark';

export default function CodeEditor{(
const handleEditorDidMount: OnMount = useCallback((editor, monaco) => {
  monaco.editor.defineTheme('atom-dark', {
    base: 'vs-dark',
    inherit: true,
    rules: OneDarkPro.rules,
    colors: OneDarkPro.colors
  });

monaco.editor.setTheme(theme === 'atom-dark' ? 'OneDarkPro' : theme);

  editorRef.current = editor;
  setIsEditorReady(true);
    
  setTimeout(() => {
    editor.getAction("editor.action.formatDocument")?.run();
  }, 100);
    
  editor.onDidChangeModelContent(() => {
    updateEditorHeight(editor, monaco);
  });
    
  updateEditorHeight(editor, monaco);
}, []);

const handleThemeChange = useCallback((value: string) => {
  setTheme(value as Theme);
}, []);
})



<Editor
  aria-label="Code Editor"
  className={maxHeight ? `max-h-[${maxHeight}]` : `max-h-[${minHeight}]`}
  height={contentHeight}
  value={editorCode}
  theme={theme}
  language={language}
  onChange={handleCodeChange}
  onMount={handleEditorDidMount}
  options={{
    ...editorOptions,
    wordWrap: 'on',
    autoIndent: 'advanced',
    cursorSmoothCaretAnimation: "explicit",
    lineNumbers: readOnly ? "off" : isReadOnly ? "off" : "on",
    accessibilitySupport: 'on',
    acceptSuggestionOnEnter: 'smart',
    renderLineHighlight: readOnly ? "none" : isReadOnly ? "none" : "all",
    placeholder: isReadOnly || readOnly ? '' : placeholder,
    tabSize: 2,
    scrollbar: {
      vertical: 'visible',
      horizontal: 'visible',
    }
  }}
  loading={
    <div className="flex w-full h-full items-center justify-center bg-transparent">
      <Spinner />
    </div>
  }
/>

Got the One Dark Theme from here: .json

then converted it here: /

Issue: The theme is defined, but it does not apply to the editor.