Javascript nested loop assignment problem (assigning too many index positions) in a multidimensional array

Question

I can't find where I have gone wrong with this code and have tried all the combinations I can think of. I have searched previous answers but have so far found nothing. In fact, most answers seem to say that this SHOULD work...

It seems that myArray[0][0] = [0,1] will assign [0, 1] to myArray[0][0] and myArray1[0] etc

// my drawing variables
pad = 20.5;
positionX = pad;
positionY = pad;
boxSize = 40;
gridSize = 9;
gridSpacing = 50;


// This creates 2 dimensional 9 x 9 array

var clickMapArray = new Array(gridSize);
clickMapArray.fill(new Array(gridSize));


// faulty FOR loop

for (var i = 0; i < gridSize; i++) {
    positionY = pad;
    for (var j = 0; j < gridSize; j++) {

// This following line assigns many index positions
// clickMapArray [0][0] AND [1][0] AND [2][0] etc till [8][0]
// all with the same value, and it does it all in one step of the debugger.

        clickMapArray[i][j] = new Array(positionX, positionY);
        positionY += gridSpacing;
    }
    positionX += gridSpacing;
}

// now having gone through the completed loop, it has overwritten many values

console.log(clickMapArray[0][0]) // should be [20.5, 20.5] and is actually [420.5, 20.5]
console.log(clickMapArray[1][0]) // should be [70.5, 20.5] and is actually [420.5, 20.5]
console.log(clickMapArray[2][0]) // should be [120.5, 20.5] and is actually [420.5, 20.5]

I don't understand how this is happening or how to fix it or work around it.

EDIT

I stopped using array.fill and changed it to this

var clickMapArray = new Array(gridSize);

for (var i = 0; i < gridSize; i++){
    clickMapArray[i] = new Array(gridSize)
}

and it works, thanks to epascarello