Mutable or immutable global state pattern in React with hooks?

I want to create a global state pattern for my next app. But I don't know if I should go for the mutable approach or the immutable one. Let me show examples illustrating my two options with pseudo-react.

Immutable

let globalState = { name: 'Enzo' } function setGlobalName(name) { globalState = { ...globalState, name } notifySubscriber1(name) notifySubscriber2(name) // ... and so on } function Component() { const [state, setState] = useState(getGlobalState()) function notifySubscriber1(name) { setState({ ...state, name }) } return <Text onClick={setGlobalName('John')}>{state.name}</Text> } 

Mutable

const globalState = { name: 'Enzo' } function setGlobalName(name) { globalState.name = name notifySubscriber1() notifySubscriber2() // ... and so on } function Component() { const state = getGlobalState() const [n, forceUpdate] = useState(0) function notifySubscriber1() { forceUpdate(n + 1) } return <Text onClick={setGlobalName('John')}>{state.name}</Text> } 

The mutable version could look dirty but let's assume that I'm going to wrap everything into a fancy API. The idea of forceUpdate comes from the MobX pattern that I once studied at that time. The pattern is pretty much the same with the difference that MobX uses Proxies to notify the component to forceUpdate.
https://github.com/mobxjs/mobx-react/issues/55#issuecomment-219536973

The thing is that I don't know what approach to take. Clearly, the mutable is much better in terms of performance because the immutable one makes a copy of the state every time we make a mutation, and this would be a problem if the store/state is a huge object.

But on the other hand, I don't know how problematic it would be the mutable way.

We can compare more or less both patterns with MobX and Redux. I know is a difficult topic because both have pros and cons. But I'm here to hear all the opinions that help me decide.