How to use the @wordpress/block-editor.createCustomColorsHOC function in @wordpress/block-editor

))}
            
            {foo}
        
    );
    const Enhanced = be.withColorContext(Component);
    ;
    ;
})();

//
// colors
//

// $ExpectType ComponentType
be.createCustomColorsHOC(COLORS)('backgroundColor', 'borderColor')(() =&gt; <h1>Hello World</h1>);

// $ExpectType string
be.getColorClassName('foo', 'bar');

// $ExpectType string | undefined
be.getColorClassName(undefined, 'bar');

// $ExpectType EditorColor | Pick
be.getColorObjectByAttributeValues(COLORS, 'red', '#ff0000');

// $ExpectType EditorColor | Pick
be.getColorObjectByAttributeValues(COLORS, undefined, '#ff0000');

// $ExpectType EditorColor | undefined
be.getColorObjectByColorValue(COLORS, '#ff0000');

title: __( 'Align Column Left' ),
		align: 'left',
	},
	{
		icon: 'editor-aligncenter',
		title: __( 'Align Column Center' ),
		align: 'center',
	},
	{
		icon: 'editor-alignright',
		title: __( 'Align Column Right' ),
		align: 'right',
	},
];

const withCustomBackgroundColors = createCustomColorsHOC( BACKGROUND_COLORS );

export class TableEdit extends Component {
	constructor() {
		super( ...arguments );

		this.onCreateTable = this.onCreateTable.bind( this );
		this.onChangeFixedLayout = this.onChangeFixedLayout.bind( this );
		this.onChange = this.onChange.bind( this );
		this.onChangeInitialColumnCount = this.onChangeInitialColumnCount.bind( this );
		this.onChangeInitialRowCount = this.onChangeInitialRowCount.bind( this );
		this.renderSection = this.renderSection.bind( this );
		this.getTableControls = this.getTableControls.bind( this );
		this.onInsertRow = this.onInsertRow.bind( this );
		this.onInsertRowBefore = this.onInsertRowBefore.bind( this );
		this.onInsertRowAfter = this.onInsertRowAfter.bind( this );
		this.onDeleteRow = this.onDeleteRow.bind( this );