How to dynamically change the cursor color(caret-color) of Codemirror(v5) text area in react?

I am building a web application for a real time code editor using web sockets in React/Nodejs. In a particular room when more than one user are simultaneously typing out the code in the editor built with Codemirror version 5.65.12, I want to indicate which user is currently typing based on the cursor/caret color. I am randomly generating a color for all the different user in the room and want to emit this color to the room wherein I can set the color of the caret to match the active user. I am struggling to change the color of the caret.

Here’s how I’ve initialized the editor:

editor.current = Codemirror.fromTextArea(
    document.getElementById("realtimeEditor"),
    {
      autoCloseTags: true,
      autoCloseBrackets: true,
      lineNumbers: true,
      mode: "clike",
      theme: "dracula",
    }
);

where editor = useRef(null)

Similarly, I’ve used another useref cursorRef = useRef(null)

And I’m trying to access the class .CodeMirror-cursor with the following code:

cursorRef.current = editor.current.display.cursorDiv.childNodes[0];
if (cursorRef.current) {
   cursorRef.current.style.setProperty(
     "border-color",
     "yellow",
     "important"
   );
   console.log(cursorRef.current.style.borderColor);
}

The console.log() outputs the value as yellow, but the color doesn’t actually change in the editor. Where am I going wrong?