TypeScript FormIO Custom Component doesnt Render & cant add Even Listeners

I have created a custom component in FormIO. I have followed the tutorial on the Check Matrix component and I am having issues trying to:

1. get the type to render as a custom name "e.g. mycomp". It returns "unknown component: mycomp" in the builder. I reverted to using a type that is known by FormIO like "textfield" and it renders
2. Adding eventlisteners to my component is not triggering

How can I get the component to render and add my events to this component? What i am doing wrong?

InputComponent.ts

    Import { Components } from "formiojs";

    const Field = Components.components.field;


    export default class loqateAddressComponent extends (Field as any) {
    constructor(component, options, data) {
     super(component, options, data);
    
    }

    static schema(...extend:any[]) {
    
      return Field.schema({
          type: 'textfield', //want this to be customname but it wont render
          label: 'Xrm Address',
          key: 'loqateaddress',
          ...extend});
    }

     static get builderInfo() {
       return {
        title: 'Loqate Address',
        group: 'basic',
        icon: 'home',
        documentation: '/userguide/#address',
        weight: 35,
        schema: loqateAddressComponent.schema(),
      };
    }

    renderInput(){
    return this.renderTemplate('input', {
      input: {
        type: 'input',
        ref: `${this.component.key}`,
        attr: {
          id: `${this.component.key}`,
          class: 'form-control',
          type: 'search',
        }
      }
    });
   }
 
   public render(children) {
    return super.render(this.renderTemplate('loqateaddress',{
      renderInputType: this.render.bind(this)
    }));
  }

  public attach(element: any) {
    const refs = {};
    refs[`${this.component.key}`] = "input";

    this.loadRefs(element, refs);
    console.log("attach rendered");

    this.addEventListener(element, 'change', ()=> { 
      console.log("address clicked");
    });
    

    return super.attach(element);
  }


  

}

Form.ejs (For my template)

<div>
    {% {{ctx.renderInputType}} %}
</div>