How to enable all HTML features for CKEditor5 in React?

Question

I have a React application that integrates CKEditor5. The application passes in HTML as data to the editor, which is then converted to the editable model within CKEditor5. The HTML that is loaded into the editor contains tags and inline styling that I know is not supported by default in CKEditor 5. For example here is some of the HTML that is initially passed to the editor:

<div align="center"> 
    <table border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; border:none"> 
    ... 
    </table> 
</div>

If I put this into source mode in CKEditor5, convert to rich text, then convert back to HTML, I see this:

<figure class="table">
    <table>
    ...
    </table>
</figure>

I looked online and found the GeneralHtmlSupport plugin, which I included in my CKEditor5 custom build when using the online builder tool. Looking through the documentation also led me to this page on configuring the GeneralHtmlSupport. Where I am stuck is how to include this within my React application. The example code given in the documentation only applies to vanilla JavaScript, and I could not find any help pertaining to CKEditor5 React builds.

Here are some files that may help give context:

src/ckeditor.ts

/**
 * @license Copyright (c) 2014-2023, CKSource Holding sp. z o.o. All rights reserved.
 * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
 */

import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';

import { Alignment } from '@ckeditor/ckeditor5-alignment';
import { Autoformat } from '@ckeditor/ckeditor5-autoformat';
import { Autosave } from '@ckeditor/ckeditor5-autosave';
import { Bold, Italic, Underline } from '@ckeditor/ckeditor5-basic-styles';
import { BlockQuote } from '@ckeditor/ckeditor5-block-quote';
import { Essentials } from '@ckeditor/ckeditor5-essentials';
import { Heading } from '@ckeditor/ckeditor5-heading';
import { GeneralHtmlSupport } from '@ckeditor/ckeditor5-html-support';
import {
    Image,
    ImageCaption,
    ImageStyle,
    ImageToolbar,
    ImageUpload
} from '@ckeditor/ckeditor5-image';
import { Indent } from '@ckeditor/ckeditor5-indent';
import { Link } from '@ckeditor/ckeditor5-link';
import { List } from '@ckeditor/ckeditor5-list';
import { MediaEmbed } from '@ckeditor/ckeditor5-media-embed';
import { Paragraph } from '@ckeditor/ckeditor5-paragraph';
import { SourceEditing } from '@ckeditor/ckeditor5-source-editing';
import { Style } from '@ckeditor/ckeditor5-style';
import { Table, TableToolbar } from '@ckeditor/ckeditor5-table';
import { TextTransformation } from '@ckeditor/ckeditor5-typing';

// You can read more about extending the build with additional plugins in the "Installing plugins" guide.
// See https://ckeditor.com/docs/ckeditor5/latest/installation/plugins/installing-plugins.html for details.

class Editor extends ClassicEditor {
    public static override builtinPlugins = [
        Alignment,
        Autoformat,
        Autosave,
        BlockQuote,
        Bold,
        Essentials,
        GeneralHtmlSupport,
        Heading,
        Image,
        ImageCaption,
        ImageStyle,
        ImageToolbar,
        ImageUpload,
        Indent,
        Italic,
        Link,
        List,
        MediaEmbed,
        Paragraph,
        SourceEditing,
        Style,
        Table,
        TableToolbar,
        TextTransformation,
        Underline
    ];

    public static override defaultConfig = {
        toolbar: {
            items: [
                'sourceEditing',
                '|',
                'heading',
                '|',
                'style',
                '|',
                'bold',
                'italic',
                'underline',
                '|',
                'bulletedList',
                'numberedList',
                '|',
                'outdent',
                'indent',
                'alignment',
                '|',
                'blockQuote',
                'imageUpload',
                'link',
                'insertTable',
                'mediaEmbed',
                '|',
                'undo',
                'redo'
            ]
        },
        language: 'en',
        image: {
            toolbar: [
                'imageTextAlternative',
                'toggleImageCaption',
                'imageStyle:inline',
                'imageStyle:block',
                'imageStyle:side'
            ]
        },
        table: {
            contentToolbar: [
                'tableColumn',
                'tableRow',
                'mergeTableCells'
            ]
        }
    };
}

export default Editor;

Editor.jsx

import "ckeditor5-custom-build";

export default function Editor({ template, setHtml }) {
  return (
    <>
      ...
      <div className="editor">
        <CKEditor
          editor={ClassicEditor}
          data={template}
          onReady={(editor) => {
            console.log("Editor is ready: " + { editor })
          }}
          onChange={(event, editor) => {
            const data = editor.getData();
            setHtml(data);
          }}
        />
      </div>
    </>
  );
}