I am currently trying to build a Digital Table Tennis game and I have a lot in place so far, but whenever I run the program, the non-AI player's bat (The green rectangle) isn't showing up. It doesn't seem to be there at all. Is there some bug in my code? Also make sure to mainly pay attention to the bottom of the code, where the animate() function is declared. The outcome so far is here: https://Digital-Table-Tennis.programprodigy.repl.co. PLS HELP!

  let canvas = document.querySelector('canvas');
  let ctx = canvas.getContext('2d');
  canvas.width = innerWidth;
  canvas.height = innerHeight;
  let mouse = {
    x: null
  }
  window.onmousemove = e => {
    mouse.x = e.x;
  }
  class Ball {
    constructor() {
      this.dx = Math.random() * 4 - 2;
      this.dy = Math.random() * 4 - 2;
      this.x = Math.random() * canvas.width;
      this.y = Math.random() * canvas.height;
    }
    draw() {
      ctx.fillStyle = 'orange';
      ctx.beginPath();
      ctx.arc(this.x, this.y, 10, 0, Math.PI * 2);
      ctx.fill();
    }
    update() {
      this.x += this.dx;
      this.y += this.dy;
      if (
        this.x >= mouse.x &&
        this.x <= mouse.x + 50 &&
        this.y >= canvas.height - 5 &&
        this.y <= canvas.height
      ) {
        this.dx = -this.dx;
        this.dy = -this.dy;
      }
      if (
        this.x <= 0 ||
        this.x >= canvas.width ||
        this.y <= 0 ||
        this.y >= canvas.height
      ) {
        this.dx = -this.dx;
        this.dy = -this.dy;
      }
      this.draw();
    }
  }
  let ball = new Ball();
  class AI {
    constructor(lvl) {
      this.x = 0;
      this.color = 'red';
      this.speed = lvl * 5;
    }
    draw() {
      ctx.fillStyle = this.color;
      ctx.fillRect(this.x, 0, 50, 5);
    }
    update() {
      if (ball.y < canvas.height / 2) {
        let distance = ball.x - this.x;
        this.x += distance / this.speed;
      }
      if (
        ball.x >= this.x &&
        ball.x <= this.x + 50 &&
        ball.y >= 0 &&
        ball.y <= 5
      ) {
        ball.dx = -ball.dx;
        ball.dy = -ball.dy;
      }
      this.draw();
    }
  }
  let ai_player = new AI(5);
  function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = 'red';
    ctx.fillRect(mouse.x - 25, canvas.height - 5, 50, 5);
    ball.update();
    ai_player.update();
    requestAnimationFrame(animate);
  }
  animate();