为什么即使使用扩展运算符克隆后原始数组仍在更改？

如何解决为什么即使使用扩展运算符克隆后原始数组仍在更改？

据我所知，当我克隆一个数组时，如果我对其克隆应用任何操作，它就会变得不可变。像这里，例如：

const test = () => {
    let array = [1,2,3,4]
    let spreadArray = [...array]

    spreadArray.forEach((item,i) => spreadArray[i] = 'changed')

    console.log(array)
    console.log(spreadArray)
}

<button>TEST</button>

可以看出它工作正常。

但是，我尝试在 ReactJs 中使用我从 Redux 接收为数组的道具来执行此操作，我在克隆数组上申请 forEach，但是当我记录结果时，我可以看到两个数组都已更改。

我的数组是这样的：

const productsData = [
    {
        id: 1,nome: 'Produto 1',qtde: 10,valor: 12.00
    },{
        id: 2,nome: 'Produto 2',qtde: 100,{
        id: 3,nome: 'Produto 3',qtde: 90,valor: 13.00
    },{
        id: 4,nome: 'Produto 4',{
        id: 5,nome: 'Produto 5',qtde: 80,valor: 12.50
    },]

这就是我正在做的：

updateQtdeHandler = (arg,id) => {

        let productsList = [...this.props.productsList]
        
        productsList.forEach((product,i) => {
            if (product.id === id) {
                if (arg === 'up') {
                    productsList[i].qtde = product.qtde+1
                    productsList[i].valorTotal = product.qtde * product.valor
                }

                if (arg === 'down') {
                    productsList[i].qtde = product.qtde-1
                    productsList[i].valorTotal = product.qtde * product.valor
                }

            }
        })

        console.log(productsList) // CLONE
        console.log(this.props.productsList) // ORIGINAL ARRAY
        //BOTH ARRAYS ARE BEING CHANGED
    }

我在这里接收数组：

const mapStatetoProps = state => {
    return {
        productsList: state.productsDataState
    }
}

我看过的每个地方都支持我的理解，但我就是不明白。

我在这里做错了什么？

或者我做错了什么，这实际上应该是使用 redux 时的正确行为？