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

[batmilkyway]

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.