Dynamically render CodeMirror on focus of div

Hey together,
I have a bit of an architectural question, I hope you can help me out. So I am currently working on a low-code tool, for which I need to render multiple code editors (50+) in a table, that gets re-rendered often. So if I render all the cells in a table as CodeMirror component, it slows my app down too much.
So the current approach I am envisioning is too render all the cells als plain content-editable divs and as soon as one gets focus, turning it into a CodeMirror component (so that autocomplete etc. work). The one tricky thing there is, that it should be immediately available to type then for the user, because otherwise it might feel sluggish when the editor initialises first

What do you think about the approach? How would this approach roughly look like in code mirror react?