title: nested state did not update having parsing error
body: <p>I'm trying to update my nested state in context but it's having an problem about the parsing error.</p>
  <p>Here is my <code>GlobalState.js</code>:</p>
  <pre><code>const [currentUser, setUser] = useState(props.serverUserData);
  
  
    const updateProfileImage = (picture) =&gt; {
      console.log('New Profile Image', picture);
      setUser({...currentUser, currentUser.picture: picture});
      console.log('currentUser2', currentUser.picture);
    };
  </code></pre>
  <p>This function help user upload their profile image but after the upload success the image didn't change until user have to log out and log back in. So I decided to create an updateProfileImage function in context that user don't need to log out and log back in to see image change.</p>
  <pre><code>  const uploadImage = () =&gt; {
      const formData = new FormData();
      formData.append(&quot;file&quot;, imageSelected);
      formData.append(&quot;id&quot;, id);
  
      axios
        .post(&quot;/api/v1/users/upload/image&quot;, formData, {
          headers: { &quot;Content-Type&quot;: &quot;multipart/form-data&quot; },
        })
        .then((response) =&gt; {
          updateUserAvatar(response.data.data.imageUrl);
        });
    };
  </code></pre>
  <p>How can I do nested state the correct way?</p>
  <pre><code>console.log(currentUser):
  
  {id: &quot;a19cac5c-ea25-4c9c-b1d9-5d6e464869ed&quot;, name: &quot;Nhan Nguyen&quot;, email: &quot;nhan13574@gmail.com&quot;, publicId: &quot;Nh1615314435848&quot;, picture: &quot;http://res.cloudinary.com/teammateme/image/upload/v1617173805/kqq7bnsujegvg2sgldox.svg&quot;, …}
  email: &quot;nhan13574@gmail.com&quot;
  id: &quot;a19cac5c-ea25-4c9c-b1d9-5d6e464869ed&quot;
  isSessionValid: true
  name: &quot;Nhan Nguyen&quot;
  picture: &quot;http://res.cloudinary.com/teammateme/image/upload/v1617173805/kqq7bnsujegvg2sgldox.svg&quot;
  publicId: &quot;Nh1615314435848&quot;
  __proto__: Object
  </code></pre>
  <p>GlobalContext.js:</p>
  <pre><code>import React from &quot;react&quot;;
  
  const globalStateDefaults = {
    modals: {
      isAuthModalOpen: false,
      modalToDisplay: &quot;signup&quot;,
      toggleModal: () =&gt; {},
      setModalToDisplay: () =&gt; {}
    },
    user: undefined,
    pageName: undefined,
    loading: false,
    teamProfileId: &quot;&quot;,
    userProfileId: &quot;&quot;
  };
  
  export const GlobalContext = React.createContext(globalStateDefaults);
  </code></pre>
  <p>Can anyone help me solve this problem? I really appreciate it.</p>