How to use codemirrormerge on json data?.

I am working in a project requirement where i need to compare the config files from different deployment environment. I was searching for a difference editor and finalised with codemirror. My data to handle is in json format. When i load it in codemirror merge, my screen is blank with no error indication. I do not know where should i indicate the lang support. Any help here would be gr8.

import React, {useState} from 'react';
import './mergeView.css';
import CodeMirrorMerge from 'react-codemirror-merge';
import { EditorView } from 'codemirror';
import { EditorState } from '@codemirror/state';
import { githubLight, githubDark } from '@uiw/codemirror-theme-github';
import { StreamLanguage } from '@codemirror/language';
import {javascript} from '@codemirror/lang-javascript';


const Original = CodeMirrorMerge.Original;
const Modified = CodeMirrorMerge.Modified;
const original_doc = `{one: to, three: four}`;
const modified_doc = `{One: Two, Three: Four}`;

export const Example = () => {
  const [theme, setTheme] = useState('light');
  return (
    <>
    <CodeMirrorMerge theme={theme === 'light' ? githubLight : githubDark} orientation="b-a">
      <Original value={original_doc} />
      <Modified
        value={modified_doc}
        extensions={[EditorView.editable.of(false), EditorState.readOnly.of(true)]}
      />
    </CodeMirrorMerge>
    <button className="theme-btn" onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}> Change Theme </button>
    </>
  );
};

Start with the reported JSX entry point and the CodeMirrorMerge, Original, Modified, EditorView, and EditorState imports shown in the issue. Check how the merge components handle the supplied JSON data and language-related extensions; the issue is done when a JSON comparison renders instead of a blank screen.