Snippets do not work properly when accessing state in onchange event

I came across some unusual behavior trying out this component: snippet functionality gets partially disabled when using this component and updating state in a onchange handler. The first term in the snippet is highlighted but the subsequent terms are not and you can't tab through them. I am new to React so it's entirely possible I am not using state properly or the component properly but I could not figure out why this was happening. I created my own react component with codemirror and it worked properly, so I thought I should report this as a potential bug. I created two sandboxes below to demonstrate the issue. Just start typing and complete the ".testSnippet" and it should be obvious.

Snippets with the react-codemirror component (snippets do not work properly, only the first term is highlighted and you can't tab through the rest):
React Codemirror Sandbox Demo
If you comment out line 32, then it works properly, so it's something having to do with the state.

Snippets with a customer codemirror component (snippets work properly):
Custom Codemirror Component Sandbox Demo

Start with the React Codemirror Sandbox Demo and reproduce the issue by typing and completing “.testSnippet” while updating state in the onchange handler. Compare it with the Custom Codemirror Component Sandbox Demo, including the behavior when line 32 is commented out. Done means all snippet terms are highlighted and can be reached with Tab while state updates continue.