Cannot Update selection property dynamically

[0xayman]

I've an UnControlled Editor, imported as CodeMirror. Here's how I configure it:

const CodeEditor = (props) => {
  const { code, selection } = props

  useEffect(() => {
    console.log(selection)
  }, [selection])

  return (
      <CodeMirror
        value={`${code}`}
        options={{
          mode: 'javascript',
          theme: 'material',
          lineNumbers: true,
          lineWrapping: true,
        }}
        onMouseDown={(editor, event) => {
          event.preventDefault()
        }}
        selection={selection}
      />
  )
}

I get selection as a prop from the parent component. The problem is, If I update the selection on the parent component, it gets updated in the CodeEditor component (I check that by the console.log inside useEffect) but the selected area on the editor doesn't update (the blue-highlighted area that appears when you select a text).