Multiple CodeMirrors in a List Breaks

I am trying to show a list of CodeMirrors, but when multiple of the component is loading in a list, it fails to properly handle state updates.

Steps to reproduce (When key={index})

1. Click on codemirror instance 1, type in 1
2. Click on codemirror instance 2, type in 2
3. No text will appear in instance 2, and the text from type 1 will disappear.

When key={cuid()}, then you can properly type in instance 1 and 2, but it triggers a re-render every character and you cannot type multiple characters at a time, so this doesn't work.

If you use a normal input element, this example works, but with code mirrors, it fails.

How do I show codemirror in a list and have it properly update to the correct states?

https://codesandbox.io/s/uiwjs-react-codemirror-issues-294-forked-74fp81

Start with the linked CodeSandbox reproduction and the React CodeMirror component behavior when multiple instances render in a list. Reproduce the key={index} and key={cuid()} cases, then trace how each instance handles state updates. Done means two CodeMirror instances retain and independently display typed text without rerendering on every character.