How to mutate state in react?

I'm trying the change the value of an object field that is nested in an array. I keep getting this error, "Cannot assign to read only property '0' of object '[object Array]'"

Here is what the state looks like

{
    "school stuffs": [
        {
            "_id": "629332e33f0e48af3d626645",
            "completed": false,
            
        },
        {
            "_id": "629425fc9c50b142dff947a9",
            "completed": true,
            
        }
    ],
    "household and furniture": [
        {
            "_id": "629334424709234a344c0189",
            "completed": false,
            
        },
        {
            "_id": "629334f12da7859af0828c9a",
            "completed": false,
            
        }
    ]
}

Here is the code I'm using to mutate the state and change the value of "completed" to the opposite value of the current Boolean.

const newArray = { ...productArray,  [value]: {...productArray}[value]  }
const index = productArray[value].findIndex(index => index._id === innerElement._id)
newArray[value][index].completed = !newArray[value][index].completed
console.log(newArray[value][index].completed); 

Via Active questions tagged javascript - Stack Overflow https://ift.tt/D6vj1WE