Как работает деструктуризация в этом примере?
Может, так понятнее. Примерно то же:
const arr = [0, 1, 2, 3, 4, 5];
const index = 3;
[ ...arr.slice(0, index), 'Habr', ...arr.slice(index + 1) ]
// [ 0, 1, 2, "Habr", 4, 5 ]Делается новый массив, в котором сначала идут элементы исходного от 0 до index (не включая index);
затем вставляется некий новый элемент;
затем добиваются элементы исходного начиная со следующего после index'ного.

Фактически заменяется элемент под индексом index на некий новый. В отличие от метода splice(), которым можно было бы сделать тоже самое arr.splice(index, 1, 'Habr'), вариант в вопросе не изменяет исходный массив, а создаёт новый – что, в общем-то, «правильно».
И тут всё понятно.
Берётся часть массива notes до index исключительно, дописывается значение event.target.value, затем часть массива notes после index. Всё это заворачивается в массив.
На выходе новый массив, копия notes, в котором элемент по index заменён на event.target.value.