[BUG] Bolinha volta antes da colisão com a raquete

Bom dia, vi que esse é um problema comum por aqui, mas mesmo lendo os tópicos, não consegui arrumar. Vou compartilhar meu código para ficar fácil a visualização do problema, a bolinha volta bem antes da raquete.

//Variáveis da Bolinha
let xBolinha = 300;
let yBolinha = 200;
let diametro = 22;
let raio = diametro /2;

//Variavéis da Raquete
let xRaquete = 5;
let yRaquete = 150;
let larguraRaquete = 10;
let comprimentoRaquete = 90;

//Variáveis da velocidade da Bolinha
let velocidadeXBolinha = 3;
let velocidadeYBolinha = 4;

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

}

function draw() {
  background(0);
  mostraBolinha();
  movimentoBolinha();
  colisaoBolinha ();
  mostraRaquete();
  movimentoRaquete();
  colisaoRaquete();

}

function mostraBolinha(){
  circle(xBolinha,yBolinha,diametro);
}

function movimentoBolinha(){
    xBolinha += velocidadeXBolinha;
  yBolinha += velocidadeYBolinha;

}

function colisaoBolinha(){
   if (xBolinha+raio > width|| xBolinha-raio < 0) {
    velocidadeXBolinha *= -1;
  }
  if (yBolinha+raio > height||yBolinha-raio <0){
    velocidadeYBolinha *= -1; 
  }
}

function mostraRaquete(){
  rect(xRaquete,yRaquete,larguraRaquete,comprimentoRaquete)
}

function movimentoRaquete(){
  if(keyIsDown(UP_ARROW)){
    yRaquete -= 10;
  }
  if(keyIsDown(DOWN_ARROW)){
    yRaquete +=10
  }
}

function colisaoRaquete(){
 if(xBolinha - raio < xRaquete + comprimentoRaquete){
    velocidadeXBolinha *= -1
    }
}