Overload resolution failed?

I am trying to render a TTF Font Loader on a Plane using Promise and converting it to Texture then on the index.js mapping it on a MeshBasicMaterial but gives me the above error

fontloader.js

const loader = new TTFLoader();
export default function loadFonts(url) {
  return new Promise(resolve => {
    let font = null;
    let text = 'three.js';
    let group, textMesh1, textMesh2, textGeo, material;
    loader.load(url, function(json) {
      font = new THREE.Font(json);
      textGeo = new THREE.TextGeometry(text, {
        font: font,
        size: 70,
        height: 0,
        bevelThickness: 0,
        bevelSize: 0,
        bevelEnabled: false
      });
      textGeo.computeBoundingBox();
      textGeo.computeVertexNormals();
      const centerOffset = -0.5 * (textGeo.boundingBox.max.x - textGeo.boundingBox.min.x);
      textMesh1 = new THREE.Mesh(textGeo, material);
      textMesh1.position.x = centerOffset;
      textMesh1.position.y = 0;
      textMesh1.position.z = 0;
      textMesh1.rotation.x = 0;
      textMesh1.rotation.y = 0;
      var texture = new THREE.Texture(textMesh1);
      texture.needsUpdate = true;
      resolve(texture)
    });
  });
}

index.js

  async createBackground() {
    // const tex = await loadTexture("test.JPG");
    const tex = await loadFonts("/fonts/kenpixel.ttf");
    var material = new THREE.MeshBasicMaterial({
      map: tex
    })
    material.map.minFilter = THREE.LinearFilter;
    const quad = new THREE.Mesh(new THREE.PlaneBufferGeometry(), material);
    quad.layers.set(1);
    quad.scale.set(this.vp.width, this.vp.height, 1);
    return quad;
  }

Im trying to refract the text created above on a 3D transparent object, I am successful when I create the text on plain canvas filltext but want to use three.js fontloader, please can anyone let me know what the error might be caused by?

Much help would be appreciated.

Thank you