Why isn't input synced with state in React?

Question

I'm making a form generator that uses a JSON schema to build a form and I've ran into an issue.

If I make a controlled input and I call getForms method (method that generates the form) on each render it updates the value of input from state as expected.

Great. But, I don't want the algorithm that generates the form from JSON schema to be called on every render.

I tried storing the form in a class variable or in a state but it didn't work as expected. When the input is changed the state is updated correctly, but it didn't update the form input.

Here is an example of my problem: https://codesandbox.io/embed/q8zl5p9x5q

Edit: examining the object there is only one difference -- the owner property is not set when i render input element from a variable. Could that be it ?

What I need is that I only generate the form once, since it has complex logic behind it it will be a performance hit that it needs to run it on every keystroke, and then update just their values from the state.

The value is not important when the getForms method is called. I just needs to be equal to the state the the input is changed.

For now only things that come to my mind are using refs and cloning the element with React.cloneElement and adding state to the value.