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


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
      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;


  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.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