Modifying or adding extensions doesn't work until re-render

Here's a small example to reproduce https://codesandbox.io/s/peaceful-waterfall-mtumc5?file=/src/App.js

I expect def to be colorized due to the python extension. Nothing happens though until one of two things:

1. Clicking the button
2. Some sort of action that causes a re-render, for example changing the text of the button in the code, and then the hot code reloader causes a re-render.

At least that's what I think is happening. Not sure if I'm doing something wrong, or unexpected, or if there's a work around.

edit: The reason I'm asking is because currently my code is structured such that I add extensions inside of a class being initialized (via useState) inside the App component, but outside of the CodeMirror component. I can move all of that outside of the class such that it can be passed into the extensions prop, but I'm wondering if this is possible as this code organization fits my own mental model better.

Start with the linked CodeSandbox reproduction, especially src/App.js, and inspect how extensions are added outside the CodeMirror component. Reproduce the issue without clicking the button or triggering another render, then trace the extensions prop and render behavior. Done means adding the python extension colorizes def immediately without requiring a re-render.