The idea is to have a single immutable data store. Immutability gives you, among other things, easier time debugging and reasoning. Having a single, global data store means that the entire state of your application can be managed centrally. There are no seemingly unimportant variables hiding anywhere that would drive your app, it's all in one place.

You can do that, but you will need to find a way to re-render the components which use that service, after something changed.

Rendering in React is based on state and props. If you want to trigger a render, you need to change one of these.

If you base it on some external entity, you need to trigger a render manually.

These state libraries usually let you wrap your component in another component, that passes the state down as props, so when the state changes, new props are passed down and your component automatically renders with the new state.