I do a lot of 3d stuff at my job, first openGL, then three, but it's too easy to make a mess with the inflating approach and unmanaged variables everywhere. I hope this will make a difference.
You could always implement a central store using an implementation of Node streams. By building a custom store you can allow a React component to access and adjust only the values it needs to render (hooks make this prettier), then share the store with your rendering framework. In that scenario React and your WebGL layer share a central “source of truth” with all of the protection from concurrency issues that React states provide.
This we had in place, but without react driving the scene we used manual Redux subscribes. Every change meant figuring out what part of the scene graph needed to be added/removed or changed. Basically the same problem one would face with jQuery and the dom.