Debugging Multiple Instances of CodeMirror in ReactJS with @uiw/react-codemirror

Question

I'm using @uiw/react-codemirror with 3 instances of the react codemirror, however, when calling them in the same page where I need them. The page re-renders everytime I type something no matter what editor is being used.

The code I'm using to initiate the CodeMirror looks like this:

const CodeEditor = React.memo(
        ({ id = "", name = "", value, onChange, mode, theme, extensions }) => {
            return (
                <CodeMirror
                    id={id}
                    name={name}
                    value={value}
                    height="200px"
                    theme={vscodeDark}
                    extensions={[loadLanguage(mode)]}
                    onChange={onChange}
                />
            );
        }
    );

Then I'm calling it 3 times this way(each one witht their corresponding values html, css, javascript):

<CodeEditor
  id="html"
  name="html"
  value={html}
  onChange={handleChange('html')}
  mode={`html`}
  theme={`material`}
/>

I tried using React.memo to make sure the component gets changed only when its props are changed as well as long as the proper codemirror ID its called? but its not working. Any ideas?