How to smoothly interpolate colors in a Voronoi diagram to remove cell borders?

Question

I am trying to create a Voronoi diagram where the color of each cell smoothly interpolates between the colors of its nearest control points. Currently, there are visible borders between the cells in the diagram. How can I get rid of these borders and smoothly interpolate the colors of the cells?

here is a working example: https://codepen.io/miguel007/pen/BaPzxxy?editors=0011

this is the drawVoronoiNoise

function drawVoronoiNoise(canvas,cells=50,noiseScale=0.06,distortionStrength=5) {
  // Get the canvas context
  const ctx = canvas.getContext('2d');

  // Generate a random set of control points
  const controlPoints = [];
  for (let i = 0; i < cells; i++) {
    var x = seededRandom(i) * canvas.width
    var y = seededRandom(i+1) * canvas.height
    const j = noise(x/188.05, y/188.05)*255;

    controlPoints.push({
      x:x,
      y:y,
      color: {r:j ,g: j ,b: j }
    });
  }

//`rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`
  const points = [];
  for (let x = 0; x < canvas.width; x++) {
    for (let y = 0; y < canvas.height; y++) {
      points.push({x, y});
    }
  }
  // For each point, find the nearest control point
  for (const point of points) {
    let nearestDistance = Infinity;
    let nearestControlPoint;
    for (const controlPoint of controlPoints) {
      // Distort the distance between the point and the control point using noise
      const noiseX = noise(point.x * noiseScale, point.y * noiseScale) * distortionStrength;
      const noiseY = noise(point.x * noiseScale + 100, point.y * noiseScale + 100) * distortionStrength;
      const distance = Math.hypot(point.x - controlPoint.x + noiseX, point.y - controlPoint.y + noiseY);
      if (distance < nearestDistance) {
        nearestDistance = distance;
        nearestControlPoint = controlPoint;
      }
    }

    // Interpolate the color of the current point based on the distance to the nearest control point
    const color = nearestControlPoint.color;
    const t = 6*nearestDistance / Math.sqrt(canvas.width ** 2 + canvas.height ** 2);
    const r = Math.round(color.r + t * (255 - color.r));
    const g = Math.round(color.g + t * (255 - color.g));
    const b = Math.round(color.b + t * (255 - color.b));
    ctx.fillStyle = `rgb(${r}, ${g}, ${b})`;
    ctx.fillRect(point.x, point.y, 1, 1);
  }
}