In example, the value is assigned as a constant. However if the value is read from a state, like minor tweak of the example below:

export default function App() { let [val, setVal] = useState('console.log') // add this line return ( <CodeMirror value={val} // use val from state height="200px" extensions={[javascript({ jsx: true }), scrollPastEnd()]} onChange={(value, viewUpdate) => { console.log("value:", value); setVal(value); // add this line }} /> ); }

Here's the bug in v4:

1. put the cursor anywhere except the end of the text
2. edit
3. the cursor will be put in the very beginning of the text after every key stroke, which is a show stopper.
4. also reproducable with useCodeMirror hook

CodeSandbox:
https://codesandbox.io/s/react-codemirror-example-codemirror-6-forked-d9u0g?file=/src/App.js