New Key Event Listeners JS?

Question

I am playing around with using key events('ArrowKeys') to make elements move on screen for personal exploration. I am using "if" statements & all of the keys work on browser except the (ArrowUp') statement. It is literally the same code as as the others but can not seem to figure out why the element will not move up.

Once the key is pressed the element is created in the browser (DOM) then moves. Here is a copy of the code.

const output = document.querySelector('.output');
const game = {x:0, y:0, speed:10, ele:null}

document.addEventListener('keydown', (event) => {
console.log(event.key);

if(!game.ele) {
  game.ele = maker();
}


if(event.key == 'ArrowRight') {
  game.x+= game.speed;
  updatePosition();
}

if(event.key == 'ArrowLeft') {
  game.x-= game.speed;
  updatePosition();
}

if(event.key == 'ArrowDown') {
  game.y+= game.speed;
 updatePosition();
}

if(event.key == 'ArrowUP') {
  game.y-= game.speed;
  updatePosition();
}

}) 


function updatePosition() {
  game.ele.style.left = game.x + 'px';
  game.ele.style.top = game.y + 'px';

}

//Any insight would help as I am just an enthusiast

I checked the console log- no errors. Tried using different key codes & events I also inverted the x/y positions & checked the css style properties