Insert at Specific Array and Replace one existing Object in Array in ES6/Javascript

I wanted to insert the productColumn 3rd to the last if isEnabled is true.
Also I wanted to replace fish column with customerFish.
How should I do that using modern Javascript like ES6 and above?

Codesandbox ------> CODESANDBOX

  const updatedListData = isEnabled
    ? {
        ...listData,
        columns: [
          ...listData.columns.slice(0, -2), // All existing columns except the last two
          newProductColumn,
          ...listData.columns.slice(-2) // Add back the last two columns
        ]
      }
    : listData;

Although mutating data is often seen as bad, in cases like this I think it's easier.

So below I clone the data, then just replace using old fashioned index specifiers, you could even then use findIndex etc to find the columns etc.

IOW: doing this I think is way simpler & powerful than trying to use spread syntax.

Below is an example.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const listData = {
columns: [
{
name: "created_at",
isDefaultColumn: true,
header: "Date created"
},
{
name: "fish",
isDefaultColumn: true,
header: "Fish"
},
{
name: "updated_at",
isDefaultColumn: true,
header: "Date updated"
},
{
name: "bought_at",
isDefaultColumn: true,
header: "Bought at"
},
{
name: "sell_at",
isDefaultColumn: true,
header: "Sell at"
}
]
};
const newProductColumns = [
{
name: "newProduct",
header: "New product?",
isDefaultColumn: true
},
{
name: "newProduct Two",
header: "New product Two?",
isDefaultColumn: false
}
];
const customerFeeColumn = {
name: "customerFish",
header: "Customer Fish",
isDefaultColumn: true
};
const isEnabled = true;
//lets clone root object, cause State change
const updatedListData = {...listData};
if (isEnabled) {
//we are also going to mutate columns array let's copy
updatedListData.columns = [...updatedListData.columns];
updatedListData.columns[1] = customerFeeColumn;
updatedListData.columns.splice(
3, //start at index 3
0, //dont delete any
...newProductColumns);  //now add the columns
}
console.log(updatedListData);

<!-- end snippet -->