Почему код так работает?

fill ()

Метод fill() заполняет все элементы массива от начального до конечного индексов одним значением.

Одним – в смысле одним и тем же (в оригинале static value). То есть

Array(n).fill(Array(n).fill(0))

равносильно следующему:

const x = Array(n).fill(0); Array(n).fill(x)

Из чего немедленно следует, что все элементы результата ссылаются на одно и то же, единственное значение.

const f = n => Array (n).fill (Array (n).fill (0)), a = f (2) 
 
console.log (a) 
 
console.assert (a [0] !== a [1])

Поэтому код в map на каждом проходе изменяет один и то же массив, что вы и имеете неудовольствие наблюдать.

Решить можно по-разному, например так:

const f = n => Array.from ({length: n}, () => Array (n).fill (0)).map ((a, i) => (a [i] = 1, a)) 
 
console.log (f (3))

Вот так Array(n).fill(Array(n)) Вы заполняете первый массив одним и тем же экземпляром массива 2

Вот рабочий сниппет:

let n = 5; 
let mat = Array(n).fill(0).map(($arrV, $i) => Array(n).fill(0).fill(1, $i, $i+1)); 
console.log(mat)

Дело в том, что каждый ваш подмассив в массиве имеет одинаковую ссылку друг на друга, в результате чего, изменяя любой из них, вы изменяете и все остальные. Чтобы создать независимые подмассивы используйте метод Array.from().

Рабочий пример:

let arr = Array(5).fill(Array(5).fill(0));
arr = arr.map(value => {
  return Array.from(value);
});
arr.map((value, k) => {
  return value.splice(k, 1, 1);
});