CKEditor with React and Typescript

package.json

  "@ckeditor/ckeditor5-build-classic": "^19.0.0",
  "@ckeditor/ckeditor5-react": "^2.1.0",

rich-text-editor.tsx

import React, { Component } from "react";
import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
export class RichTextEditor extends Component<any, any>{
    render() {
        return (
            <CKEditor
                editor={ClassicEditor}
                data="<p>Hello from CKEditor 5!</p>"
                onInit={(editor: any) => {
                    // You can store the "editor" and use when it is needed.
                    console.log('Editor is ready to use!', editor);
                }}
                onChange={(event: any, editor: any) => {
                    const data = editor.getData();
                    console.log({ event, editor, data });
                }}
                onBlur={(event: any, editor: any) => {
                    console.log('Blur.', editor);
                }}
                onFocus={(event: any, editor: any) => {
                    console.log('Focus.', editor);
                }}
            />
        );
    }
}

typing.d.ts

//credit goes to https://github.com/ckeditor/ckeditor5/issues
declare module "@ckeditor/ckeditor5-react" {
    const CKEditor: any;
    export default CKEditor;
}
  
declare module "@ckeditor/ckeditor5-build-classic" {
    const ClassicEditor: any;
    export = ClassicEditor;
}
  

declare module '@ckeditor/ckeditor5-react' {
  import * as React from 'react';
  import { Editor } from '@ckeditor/ckeditor5-core';

  export interface CKEditorProps {
    editor: typeof Editor;
    data?: string;
    config?: object;
    onChange?: (event: any, editor: any) => void;
    onBlur?: (event: any, editor: any) => void;
    onFocus?: (event: any, editor: any) => void;
  }

  const CKEditor: React.ComponentType<CKEditorProps>;

  export default CKEditor;
}