JavaScript: Flatenning array of arrays using reduce

I actually answered this exercise fairly quickly, but I just want to completely understand it.

Below you will find the problem and my solution, but I'm not clear WHY the solution worked (I just memorized how to do the method from a problem just minutes before this one).

// Using reduce method, flatten the customerNames array of arrays. In other words, take all the names from each array inside customerNames and place them in one big array. Store the flattened array in the flattenedCustomerNames variable. You can use the array in the comments below for reference.

const customerNames = [
    [ "John", "Sandy", "Tyrone", "Elizabeth", "Penny" ],
    [ "Barry", "Wanda", "Jamal", "Hayden" ],
    [ "Portia", "Pam", "Philip" ]
];
let flattenedCustomerNames;

// flattenedCustomerNames should be: ["John", "Sandy", "Tyrone", "Elizabeth", "Penny", "Barry", "Wanda", "Jamal", "Hayden", "Portia", "Pam", "Philip"]
// Write your code below


flattenedCustomerNames = customerNames.reduce((arr, names) => [ ...arr, ...names], []);

My questions are:

1. Why does the return need square brackets? I'm away the output needs to be an array, hence why we inserted the empty array as the second variable. So since we have the empty array as the second variable, why are the brackets in the return necessary? Shouldn't the second variable imply that we want the answer in an array?
2. Can someone explain why ...arr, ...names works in this solution? I'm away that reduce needs an accumulator and current value variable, but I'm confused on how this format outputs the correct answer of the nicely flattened array of all the desired values.

I hope these questions make sense. Thanks!!

Josh