The best way to add an item to the array without mutating its content, in other words creating a new array, is to use the spread operator.
Check this example:
const fruits = ['banana', 'pear', 'apple']
const morefruits = ['orange', ...fruits ]
console.log(morefruits)
//[ 'orange', 'banana', 'pear', 'apple' ]
How does it work? When we use ...fruits we basically expand the content of fruits. Since we enclosed that in the array literal syntax [], we’ll end up creating a new array morefruits, with the original content of fruits, plus anything we add to it.
We used ['orange', ...fruits ] to add an orange to the list of fruits, in the first position.
In the same way, you can append to the end of the array using [...fruits, 'orange']:
const fruits = ['banana', 'pear', 'apple']
const morefruits = [...fruits, 'orange']
console.log(morefruits)
//[ 'banana', 'pear', 'apple', 'orange' ]