I'm building an animation with multiple drawn circles going left to right. However, the animation starts at the same time for all circles, and I need them to have a timed interval (for example 1 second) between each other. Any idea on how to manage this? I've tried setInterval without success. The drawing of circles is as follows:

function isPrime(num) {
  for(var i = 2; i < num; i++)
    if(num % i === 0) return false;
  return num > 1;
}
const settings = {
  width: 300,
  height: 930,
  radius: 13,
  gap: 5,
  circles: 30,
};
const canvas = document.getElementById("canvas");
canvas.width = settings.width;
canvas.height = settings.height;
const ctx = canvas.getContext("2d");
var randomNumber = [];


const circles = [...Array(settings.circles).keys()].map((i) => ({
  number: randomNumber[i],
  x: settings.radius,
  y: settings.radius + (settings.radius * 2 + settings.gap) * i,
  radius: settings.radius,
  dx: 100, // This is the speed in pixels per second
  dy: 0,
  isPrime: isPrime(randomNumber[i]),
}));

function drawCircle(circle) {
  i = 0;
  if (circle.number > 0 && circle.number <= 10) {
    ctx.strokeStyle = "#0b0bf1";
  } else if (circle.number > 10 && circle.number <= 20) {
    ctx.strokeStyle = "#f10b0b";
  } else if (circle.number > 20 && circle.number <= 30) {
    ctx.strokeStyle = "#0bf163";
  } else if (circle.number > 30 && circle.number <= 40) {
    ctx.strokeStyle = "#f1da0b";
  } else if (circle.number > 40 && circle.number <= 50) {
    ctx.strokeStyle = "#950bf1";
  } else if (circle.number > 50 && circle.number <= 60) {
    ctx.strokeStyle = "#0bf1e5";
  }
  ctx.beginPath();
  ctx.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2, false);
  ctx.stroke();
  ctx.fillText(circle.number, circle.x - 5, circle.y + 3);

}

function updateCircle(circle, dt) {
  circle.x = clamp(
    circle.x + circle.dx * dt,
    circle.radius + 1,
    settings.width - circle.radius - 1
  );
  circle.y = clamp(
    circle.y + circle.dy * dt,
    circle.radius + 1,
    settings.height - circle.radius - 1
  );
}

function animate() {
  ctx.clearRect(0, 0, settings.width, settings.height);
  circles.forEach(drawCircle);

  requestAnimationFrame(animate);
}
animate();
update((dt) => circles.forEach((circle) => updateCircle(circle, dt)), 50);