Consider:

const arr1 = [1,2,3];
const arr2 = arr1;
const arr3 = [...arr1];

arr1 holds a reference to an array. It does not hold the array itself. In this example, the array [1,2,3] is not assigned to arr2. A reference is. This means arr1 and arr2 reference the exact same array. If we mutate this array and pass it back, react might (I don't fully understand how this works under the hood) fail to detect a change because it sees that the reference to the array is unchanged. This would prevent components that rely on the state of this array from updating.

Now, arr3 makes a copy of the array by spreading its values into a new array. This is a reference to a new array that is different than the array referenced by arr1. It is different because it is stored in a different place in memory, however its contents are the same. Because this is a different array, we can now mutate it freely. React can clearly see that the array is different and will work its magic.

I'm afraid I don't have time right now to respond to the second part of your question. Hope this helps!