Could use some pointers to get me started

[Stemu2000]

Totally new to react and struggling with some concepts on how to deal with the state. I think react/typescript will be fantastic to base my application on a strong foundation (javascript alone will be a nightmare as my application grows). I am developing a furniture editor where models consist of multiple panels/joins/fixings/hardware/etc ... and i am using three-fiber to represent them.

i created a (simplified) sandbox here:
https://codesandbox.io/s/gf6xqr-gf6xqr

My codesandbox shows the general structure of my program (multiple editors, each editor has a treeview and outputs a flat list of models).

Models in my valtio store will be quite complex (linking between each other, etc, which is why i include them with a ref() - the idea is to also include all my code and logic in the model-classes. But then the ref() thing results in me losing track of changes within react ... so what am I supposed to do? Create a proxy-store with a structure that represents my model-structure and keep that one synced when i add/remove models? The add/remove button in my sandbox show how updates don't work (and i know why), strangely they work if i switch between editors - upon returning the model-list shows the updated state, i wouldn't expect that behaviour?!

The treeview is also derived from the model structure - but in addition to just the models it will be a bit more complex (models will have additional nodes to represent panels/hardware/joins/etc) and they can collapse/expand and switch visibility, rename models, be dragged around, etc. What is the best way to derive those treenodes from the models and get them to update accordingly?! Codesandbox shows the treeview seems to have a state of its own - forcing an update doesn't work, neither does adding/removing models, not even when i switch editors?!

Any help or input would be appreciated, thanks!