Applying a fragment shader to a surface in Mathbox JS

the fragment shader is applyed correctly to the lines but not the fill how do I fix that ?

      this.view = this.mb.cartesian({
        range: [[-1, 1], [-1, 1], [-1, 1]],
        scale: [1, 1, 1],
      });

      const shader = this.view.shader({
        code: `
        vec4 fragmentShader(vec4 rgba, inout vec4 stpq) {
         return vec4(stpq.x, stpq.x, stpq.x, 1.0); // Grayscale based on stpq.x
      }
    `,
      }).fragment();

      const area = shader.area({
        width: 10,
        height: 10,
        axes: [1, 2],
        expr: (emit: any, x: any, y: any, i: any, j: any, time: any) => {
          emit(x, y, 0);
        },
        channels: 3,
        items: 1,
      });

      area.surface({
        lineX: true, // Enable lines along X
        lineY: true, // Enable lines along Y
        fill: true, // Fill the surface polygons
        width: 30,
      });