Am using react recoil for my state management and have a moderately nested object serving as state for this particular component.

When trying to update the state with setState (the Recoil version, I'm suspecting vanilla React useState would behave similar), I grab the old version of the object, and try mutating it a bit before returning the updated state. But reassigning values on this object fails completely silently, I see no warnings, but assigning a new value has no effect. Example:

import { useRecoilState} from "recoil";

...

const [state, setState] = useRecoilState(sampleState);

const someCallback = () => {
        setState((oldState) => {
            const newState = { ...oldState };
            console.log(newState.dog.paw); // false
            newState.dog.paw = true

            //stopping the debugger here and trying to reassign in the devtools has equally no effect

            console.log(newState.dog.paw); // false
            return newState ;
        });
    };

when reassigning during a paused debugger session in chrome dev tools this is happening:

newState.dog.paw = true
true
newState.dog.paw
false

I am aware that React's documentation says that mutating the state object directly is not advisable but from that to explaining what is happening above is a gap I don't know how to fill.

I actually also know how to work around the problem, the solution is to spread reassign the parent object like so:

newState.dog = {...newState.dog, paw:true}

Having said all that, I'd be grateful for some deeper insight about what is happening up there and why is this phenomenon behaving so weirdly in the interpreter/devtools -> the reassignment seems to go through but it doesn't have any effects.