Separate state into many useStates instead of one with everything

i see you are a vibe coding fan.

the multiple `useState`s allow each component to only update once the `useState`s they rely on are updated. Should refactor that now while it's relatively easy to untangle. And every variable should be passed down as props to the components (not importing the state) so the re-render works effectively.