title: Reaching Nested State data w/ Reducer using immer
body: <p>I got data.js that contains name, listOfReview that have sub nested state(name, occupation and etc). i'm using useReducer to add another review on the listofreview. but the problem is after posting a review it will create a new object outside the listofreview. The output</p>
  <pre><code>data.js
  export const data = [
      {
          id: 1607089645363,
          name: 'john',
          noOfReview: 1,
          listOfReview: [
              {
                  reviewId: 1607089645361,
                  name: 'john doe',
                  occupation: 'hero',
                  rating: 5,
                  review: 'lorem ipsum',
              }
          ]
      },
  ];
  
  index.js
  import { data } from '../../src/data';
  import { reducer } from './reducer';
  
  const defaultState = {
      review: data
  }
  const ModalHandler = props =&gt; {
      const [rating, setRating] = useState(null);
      const [name, setName] = useState('');
      const [occupation, setOccupation] = useState('');
      const [reviews, setReviews] = useState('');
      const [state, dispatch] = useReducer(reducer, defaultState);
  
      const handelSubmit = (e) =&gt; {
          e.preventDefault();
          if (name &amp;&amp; occupation &amp;&amp; reviews) {
              const newReview = { Reviewid: new Date().getTime().toString(), rating, name, occupation, reviews };
              dispatch({ type: 'ADD_REVIEW_ITEM', payload: newReview });
          }
      }
  }
  
  reducer.js
      export const reducer = (state, action) =&gt; {
      switch (action.type) {
          case &quot;ADD_REVIEW_ITEM&quot;:
              return state.map((data) =&gt; {
                  if (data) {
                      const newReview = [...data.listOfReview, action.payload];
                      return {
                          ...data,
                          listOfReview: newReview
                      };
                  }
                  return data;
              });
          default:
              return state;
      }
  };
  </code></pre>
  <p><strong>OUTPUT</strong>
  <a href="https://i.stack.imgur.com/7GXdh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7GXdh.png" alt="enter image description here" /></a></p>