Froala Editor Plugins using React Typescript

I am trying to add a custom plugin to a Froala Editor in my React app using the package react-froala-wysiwyg. I am following this tutorial on how to add a custom popup/plugin. The problem I am having is that the app is written in typescript and a dependency of the package - froala-editor - is not definitely typed so I am having to make a custom type definition based on the one I found here.

Up until this point I have been able to add missing properties to the type definition as I go along but it gets more complicated when dealing with the functions that should be accessing the custom plugin. It goes like this ... I have a plugin called smartFieldPlugin which has three methods initPopup, showPopup and hidePopup. I've created a toolbar button to access the plugin as follows:

FroalaEditor.DefineIcon('smartFieldIcon', { NAME: 'Smart Field', template: 'text'})
FroalaEditor.RegisterCommand('smartFieldButton', {
  title: 'Insert Smart Field',
  icon: 'smartFieldIcon',
  undo: true,
  focus: false,
  plugin: 'smartFieldPlugin',
  callback: function() {
    // this.smartFieldPlugin.showPopup();
    FroalaEditor.PLUGINS.smartFieldPlugin.showPopup();
    
  }
});

This throws the error: property 'showPopup' does not exist on type '(editor: FroalaEditor) => CustomPlugin'

For more context CustomPlugin and PLUGINS are defined in the type definition file as follows:

  export interface CustomPlugin {
    _init?(): void;
    showPopup?(): void;
    hidePopup?(): void;
  }

  export const PLUGINS: GenericObject<(editor: FroalaEditor) => CustomPlugin>;

  export type GenericObject<T = any> = { [key: string]: T };

I am wondering if anyone knows why I am seeing this error, a simple way around it, or a way to avoid typing issues in general with react-froala-wysiwyg. Thanks.