I've been trying to add an object inside an object, but this one disappears after I call a function:

I have one object 'item'

  const item = {
    id,
    type: 'instance',
    parent_id: null,
  }

I then call an API to get an other object of datas.

try {
 const res = await api.getData()
 console.log(res.data) // return { key1: value1, key2: value2 }
} catch(error) {
 console.log(error)
}

I add those key/value pair to an 'instance_setting' object inside item.

item.instance_setting = res.data

console.log(item) // return { id: 'xxx', type: 'instance', 'parent_id': 'xxx', instance_setting: {key1: value1, key2: value2 }}

So far all is doing fine.

Then I call a function 'MUTATE_DATA' to add this object into my state, which trigger the unexpected behavior. Here is the whole code:

const MUTATE_DATA = (item) => {
  state.menuItems.push(item)
  state.newItems.push({ id: item.id })
}

const useAddInstance = async (id) => {

  const item = {
    id,
    type: 'instance',
    parent_id: null,
  }

 try {
 const res = await api.getData()
 item.instance_setting = res.data

 MUTATE_DATA(item)
 console.log(item) // return { id: 'xxx', type: 'instance', 'parent_id': 'xxx'}

} catch(error) {
 console.log(error)
}

You can see in the console.log(item) my object instance_setting disappeared.

I know the line making problem is

state.newItems.push({ id: item.id })

but I do not understand why this would make this nested object disappear.

Thanks for your help!