[Dúvida] Bolinha passa pela Raquete

A Bolinha esta passando diretamente pela Raquete, mas não consigo achar o que esta de errado com meu código.

//variáveis do Circle
let xCircle = 300;
let yCircle = 200;
let dCircle = 20;
let raio = dCircle / 2;
let esquerdaCircle = xCircle - raio;
let direitaCircle = xCircle + raio;
let inferiorCircle = yCircle + raio;
let superiorCircle = yCircle - raio;

//variáveis da velocidade2
let velocidadeXCircle = 6;
let velocidadeYCircle = 6;

//Raquete
let xRect = 5;
let yRect = 150;
let larguraRect = 10;
let alturaRect = 90;
let direitaRect = xRect + larguraRect;
let superiorRect = yRect;
let inferiorRect = yRect + alturaRect;

function setup() {
  createCanvas(600, 400);
}

function draw() {
  background(0);
  circlePosition();
  circleMoviment();
  circleColision();
  rectPosition();
  rectMoviment();
  rectColision();
}

function rectPosition() {
  rect(xRect, yRect, larguraRect, alturaRect);
}
function rectMoviment() {
  if (keyIsDown(UP_ARROW)) {
    yRect -= 5;
  }
  if (keyIsDown(DOWN_ARROW)) {
    yRect += 5;
  }
}
function rectColision() {
  if (
    esquerdaCircle < direitaRect &&
    superiorCircle < inferiorRect &&
    inferiorCircle > superiorRect
  ) {
    velocidadeXCircle *= -1;
  }
}

function circlePosition() {
  circle(xCircle, yCircle, dCircle);
}
function circleMoviment() {
  xCircle += velocidadeXCircle;
  //yCircle += velocidadeYCircle;
}
function circleColision() {
  if (xCircle + raio > width || xCircle - raio < 0) {
    velocidadeXCircle *= -1;
  }
  if (yCircle + raio > height || yCircle - raio < 0) {
    velocidadeYCircle *= -1;
  }
}