I have an interesting problem here I will try to outline here. I have a state object in React state that is updated in two separate async functions in this way:

const [someState, setSomeState] = useState({})

const somefunction1 = async () => {
  const res1 = ///some api call
  setSomeState({...someState, res1: res1})
}

const somefunction2 = async () => {
  const res2 = ///some api call
  setSomeState({...someState, res2: res2})
}

await someFunction1();
await someFunction2();

console.log(someState); //{res2: res2}

Based on the above example, I am not sure why res1 is missing in this state object when they are called separately, the second call effectively overwrites the changes made from the first call. What I really need this to look like when its done is:

console.log(someState); //{res1: res1, res2: res2}

Is there a better way to write this scenario so I get the expected outcome? Since one somefunction2 is supposed to wait until somefunction1 is complete, I am not sure why it is overwriting it. Any help will be appreciated. Thank you.