utiliser p5js avec javascript ma fonction pour déplacer fonctionne lorsqu'une chaîne est envoyée mais pas lorsqu'elle est envoyée une variable contenant une chaîne

En utilisant la bibliothèque connue sous le nom de p5 avec javascript, j'essaie de faire du jeu un serpent, mais cela ne fonctionne tout simplement pas. comme décrit dans le titre, il ne bouge que lorsque je donne à la fonction de déplacement un argument tel que "DOWN", mais pas lorsque je lui donne la direction de variable contenant la valeur "DOWN".

let fr = 5

function setup() {
  frameRate(fr)
  createCanvas(400, 400);
}

x1 = 201
y1 = 201
direction = "NONE"

function move(direction) {
  if (direction === "UP") {
    y1 = y1 - 20
  }
  else if (direction === "DOWN") {
    y1 = y1 + 20
  }
  else if (direction === "LEFT") {
    x1 = x1 - 20
  }
  else if (direction === "RIGHT") {
    x1 = x1 + 20
  }
}

function draw() {
  let c = color('#1cb82e')
  direction = "down"
  background(0);
  square(x1,y1,18);
    fill(c);
  move(direction);
}

function keyPressed() {
  var validKeys = [37,38,39,40]
  var dict = {
    37:"LEFT",
    38:"UP",
    39:"RIGHT",
    40:"DOWN"
  }
  if (validKeys.includes(keyCode) === true) {
    direction = dict[keyCode];
  }
  print(dict[keyCode])
}

Est-ce que quelqu'un peut m'aider avec ça? Merci!! Edit : au cas où quelqu'un d'autre voudrait utiliser l'éditeur Web, voici le lien https://editor.p5js.org/