Weird Array behaviour in ReactNative [duplicate]

I want to render a table on the screen. So, I create a two-dimensional array and iterate over it in the render function:

class Matrix<T> extends Array<T[]> {  constructor(width: number, height: number, initialValue?: T) {    super(height);    this.fill(new Array(width).fill(initialValue);  }}let matrix = new Matrix(3, 3, 0)// I wan't the central cell to have a different valuematrix[1][1] = 1function App() {  return (<View>      {matrix.map((row, y) => {        return row.map((col, x) => {          return <View style={{ left: x * 10, top: y * 10, width: 10, height: 10, }}><Text>{matrix[y][x]}</Text></View>        }      }}</View>  )}

I expect to see a little 3x3 table to be rendered, similar to this:

0 0 00 1 00 0 0

But instead what I'm this:

0 1 00 1 00 1 0

I have no other explanation than each row (matrix[y]) is the same object, so changing matrix[1][1] will reflect on matrix[1][0] and matrix[1][2], which doesn't make any sense.

I tried creating rows and matrix itself with the array literals ([]), still the rows of my table cannot be changed separately. Unless I'm missing something, I think that might be a ReactNative quirk.

Would anyone suggest what's going on and how to work around? Thank you.