THREE.js Using lerpColors to make Gradients

Question

I've been trying to figure out some things re .lerpColors() - specifically if it's possible to transition between more than just 2 colors.

I quickly put together a little app - the code is below and it works 100%, creating a nice smooth transition between WHITE and BLUE.
I also put this exact same code in a fiddle - but for some reason it's NOT working there, even though it's the same code: https://jsfiddle.net/gilomer88/6cw8az72/16/

Either way, what I'd like to know is if it's possible to transition from say Blue to White to Red. Or even transition between 4 colors - as opposed to only two colors, the way I have it right now.

Here's my code:

function makeCube() {
  
   var cubeMaterial = new THREE.MeshPhongMaterial({ 
        flatShading: false,
        shininess: 80,
        vertexColors: true
      });

   var cubeGeometry = new THREE.BoxBufferGeometry(10, 10, 10, 30, 30);
   var cubeVertexPositionsArray = cubeGeometry.attributes.position;
   console.log("cubeVertexPositionsArray.count = ", cubeVertexPositionsArray.count);
                
   const vertex = new THREE.Vector3();

   cubeGeometry = cubeGeometry.toNonIndexed(); 

   // "BoundingBox" business:
   cubeGeometry.computeBoundingBox();
   const aabb = cubeGeometry.boundingBox;
   const f = aabb.max.z - aabb.min.z;
                
   cubeVertexPositionsArray = cubeGeometry.attributes.position;

   let c1 = new THREE.Color("white");
   let c2 = new THREE.Color("red");
  
   // Make the Colors Array:
   var cubeColorsArray = [];
   let finalColor = new THREE.Color();


   for(let i = 0; i < cubeVertexPositionsArray.count; i++) {
      vertex.fromBufferAttribute( cubeVertexPositionsArray, i );
      let alphaValue = ( vertex.z - aabb.min.z) / f ;
      finalColor.lerpColors( c1, c2, alphaValue );
      /* finalColor = whiteColor.lerpHSL( redColor, alphaValue ) */;
      // cubeMaterial.color.copy(whiteColor).lerpHSL(redColor, alphaValue);
      cubeColorsArray.push(finalColor.r, finalColor.g, finalColor.b);  
   }

   cubeGeometry.setAttribute("color", new THREE.Float32BufferAttribute(cubeColorsArray, 3));     
   cubeMaterial.vertexColors = true;
   cubeMaterial.flatShading = false;

   let cubeMesh = new THREE.Mesh(cubeGeometry, cubeMaterial);
  
   scene.add(cubeMesh);
   cubeMesh.position.set(0, 0, 0);

}