How to fix this error in CodeMirror react application?

Question

I am building a live code editor using socket.io I am stuck in the error editorRef.current.on is not a function.

import React, { useEffect, useRef, useState } from 'react';
import CodeMirror from '@uiw/react-codemirror'
import { atomone } from '@uiw/codemirror-theme-atomone'
import { javascript } from '@codemirror/lang-javascript';
import { cpp } from '@codemirror/lang-cpp';


const Editor = ({ socketRef, roomId, onCodeChange }) => {
    const editorRef = useRef(null);
    const [code, setCode] = useState('');
    useEffect(() => {
        const init = async () => {
            if (editorRef.current) {
                editorRef.current.editor.focus(); // Set focus on the editor
            }
            // editorRef.current.editor.focus();
            editorRef.current.on('change', (instance, changes) => {
                console.log('change', changes);
            })
        }
        init();
    }, [editorRef])


    return <CodeMirror
        theme={atomone}
        extensions={[javascript(), cpp()]}
        value={code}
        style={{ flex: 1, textAlign: 'left' }}
        height="100vh"
        onChange={(e) => { setCode(e) }}
        ref={editorRef}
    />
};

export default Editor;

I created a editorRef object using the useRef hook and pass it as a prop to the CodeMirror component using the ref attribute. I then use the useEffect hook to set focus on the editor when it's mounted. But stuck with the same error again and again.