JSX Text Input doesn't work if it has an onChange property (React)

Question

I'm having an issue where any text input that has an onChange property will not let me type in it. I still do have a milisecond of time that I can type something in it, but I can barely type one letter at a time if I really try.

The way I usually solved this problem was to get the value of the input once using document.getElementById().value, instead of having a function that does it automatically.

Basically I did this

<input id="something" type="text" />
<button onClick={() => doSomething(document.getElementById("something").value)}>Click Me!</button>

instead of this,

<input value={value} onChange={e => setValue(e.target.value)} />
<button onClick={() => doSomething(value)}>Click Me!</button>

but now I need to do some real time updates so I need this method.

Answer 1

It turns out that somehow the fix was to just make on giant React component that stores all the code instead of smaller, organized components.