How to use the @wordpress/components.withAPIData function in @wordpress/components

*/
import { compose } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { PanelBody, PanelColor, withAPIData } from '@wordpress/components';

/**
 * Internal dependencies
 */
import BlockAlignmentToolbar from '../../block-alignment-toolbar';
import BlockControls from '../../block-controls';
import ColorPalette from '../../color-palette';
import InspectorControls from '../../inspector-controls';
import RangeControl from '../../inspector-controls/range-control';

const withSiteTitle = compose(
	withAPIData( () => ( {
		options: '/',
	} ) ),
	( Component ) => (
		( { options, ...props } ) => (
			
		)
	)
);

export const name = 'core/site-title';

export const settings = {
	title: __( 'Site title' ),

];
	}
}

TaxonomiesElement.defaultProps = {
	termSeparator: __( ', ', 'events-gutenberg' ),
	className: '',
};

const applySelect = withSelect( ( select, props ) => {
	return {
		terms: select( 'core/editor' ).getEditedPostAttribute( props.slug ),
	};
} );

const applyWithAPIData = withAPIData( ( props ) => {
	const { slug, terms } = props;
	const args = {
		per_page: 100,
		orderby: 'count',
		order: 'desc',
	};

	if ( ! terms || ! terms.length ) {
		return {
			terms: [],
		};
	}

	args.include = terms;

	const query = stringify( args );

onInputChange={ this.searchTerms }
				maxSuggestions={ MAX_TERMS_SUGGESTIONS }
				disabled={ loading }
				placeholder={ newTermPlaceholderLabel }
				messages={ {
					added: termAddedLabel,
					removed: termRemovedLabel,
					remove: removeTermLabel,
				} }
			/>
		);
	}
}

export default compose(
	withAPIData( ( props ) => {
		const { slug } = props;
		return {
			taxonomy: `/wp/v2/taxonomies/${ slug }?context=edit`,
		};
	} ),
	withSelect( ( select, ownProps ) => {
		const { getCurrentPost } = select( 'core/editor' );
		return {
			hasCreateAction: get( getCurrentPost(), [ '_links', 'wp:action-create-' + ownProps.restBase ], false ),
			hasAssignAction: get( getCurrentPost(), [ '_links', 'wp:action-assign-' + ownProps.restBase ], false ),
			terms: select( 'core/editor' ).getEditedPostAttribute( ownProps.restBase ),
		};
	} ),
	withDispatch( ( dispatch ) => {
		return {
			onUpdateTerms( terms, restBase ) {

,
		];
	}
}

TaxonomiesElement.defaultProps = {
	termSeparator: __( ', ', 'events-gutenberg' ),
	className: '',
};

const applySelect = withSelect( ( select, props ) => ( {
	terms: select( 'core/editor' ).getEditedPostAttribute( props.slug ),
} ) );

const applyWithAPIData = withAPIData( ( props ) => {
	const { slug, terms } = props;
	const args = {
		per_page: 100,
		orderby: 'count',
		order: 'desc',
	};

	if ( ! terms || ! terms.length ) {
		return {
			terms: [],
		};
	}

	args.include = terms;

	const query = stringify( args );

*/
import { buildTermsTree } from '@wordpress/utils';
import { TreeSelect, withAPIData } from '@wordpress/components';

function CategorySelect( { label, noOptionLabel, categories, selectedCategory, onChange } ) {
	const termsTree = buildTermsTree( get( categories, 'data', {} ) );
	return (
		
	);
}

const applyWithAPIData = withAPIData( () => {
	const query = stringify( {
		per_page: 100,
		_fields: [ 'id', 'name', 'parent' ],
	} );
	return {
		categories: `/wp/v2/categories?${ query }`,
	};
} );

export default applyWithAPIData( CategorySelect );