React 18: Handling Nested State Updates Using useReducer and useContext
I'm working on a React 18 application where I'm using `useReducer` in combination with `useContext` to manage nested state for a complex form. The scenario arises when I try to update a deeply nested property, and the state doesn't seem to reflect the changes as expected. My reducer looks something like this: ```javascript const initialState = { user: { name: '', email: '', address: { street: '', city: '', zip: '' } } }; const reducer = (state, action) => { switch (action.type) { case 'UPDATE_ADDRESS': return { ...state, user: { ...state.user, address: { ...state.user.address, ...action.payload } } }; default: return state; } }; ``` When I dispatch an action like this: ```javascript const updateAddress = (newAddress) => { dispatch({ type: 'UPDATE_ADDRESS', payload: newAddress }); }; ``` I pass a partial address object: ```javascript updateAddress({ street: '123 Main St', city: 'Anytown' }); ``` However, after the update, the `address` object seems to lose its `zip` value and defaults to `undefined`. The console shows the following message when I try to access it: ``` TypeError: want to read properties of undefined (reading 'zip') ``` I've confirmed that the `zip` property is part of the initial state, and I made sure not to mutate the state directly. I've also tried using a deep clone for the nested properties, but it didn’t resolve the scenario. What am I missing here? Is there a better way to handle nested updates with `useReducer`? Any insights would be greatly appreciated!