How to use the @wordpress/compose.useInstanceId function in @wordpress/compose

function ControlPointButton( {
	isOpen,
	position,
	color,
	onChange,
	gradientIndex,
	gradientAST,
	...additionalProps
} ) {
	const instanceId = useInstanceId( ControlPointButton );
	const descriptionId = `components-custom-gradient-picker__control-point-button-description-${ instanceId }`;
	return (

export default function Token( {
	value,
	status,
	title,
	displayTransform,
	isBorderless = false,
	disabled = false,
	onClickRemove = noop,
	onMouseEnter,
	onMouseLeave,
	messages,
	termPosition,
	termsCount,
} ) {
	const instanceId = useInstanceId( Token );
	const tokenClasses = classnames( 'components-form-token-field__token', {
		'is-error': 'error' === status,
		'is-success': 'success' === status,
		'is-validating': 'validating' === status,
		'is-borderless': isBorderless,
		'is-disabled': disabled,
	} );

	const onClick = () => onClickRemove( { value } );

	const transformedValue = displayTransform( value );
	const termPositionAndCount = sprintf(
		/* translators: 1: term name, 2: term position in a set of terms, 3: total term set count. */
		__( '%1$s (%2$s of %3$s)' ),
		transformedValue,
		termPosition,

export default function BlockManagerShowAll( { checked, onChange } ) {
	const instanceId = useInstanceId( BlockManagerShowAll );
	const id = 'edit-post-manage-blocks-modal__show-all-' + instanceId;

	return (
		<div>
			<label id="">
				{ /* translators: Checkbox toggle label */
				__( 'Show section' ) }
			</label>
			 onChange( event.target.checked ) }
			/&gt;</div>

export default function SelectControl( {
	help,
	label,
	multiple = false,
	onChange,
	options = [],
	className,
	hideLabelFromVision,
	...props
} ) {
	const instanceId = useInstanceId( SelectControl );
	const id = `inspector-select-control-${ instanceId }`;
	const onChangeValue = ( event ) => {
		if ( multiple ) {
			const selectedOptions = [ ...event.target.options ].filter( ( { selected } ) => selected );
			const newValues = selectedOptions.map( ( { value } ) => value );
			onChange( newValues );
			return;
		}
		onChange( event.target.value );
	};

	// Disable reason: A select with an onchange throws a warning

	/* eslint-disable jsx-a11y/no-onchange */
	return ! isEmpty( options ) && (

export default function FontSizePicker( {
	fallbackFontSize,
	fontSizes = [],
	disableCustomFontSizes = false,
	onChange,
	value,
	withSlider = false,
} ) {
	const instanceId = useInstanceId( FontSizePicker );
	const [ currentSelectValue, setCurrentSelectValue ] = useState( getSelectValueFromFontSize( fontSizes, value ) );

	if ( disableCustomFontSizes && ! fontSizes.length ) {
		return null;
	}

	const setFontSize = ( fontSizeKey, fontSizeValue ) => {
		setCurrentSelectValue( fontSizeKey );

		if ( fontSizeKey === DEFAULT_FONT_SIZE ) {
			onChange( undefined );
			return;
		}

		if ( ! fontSizeValue ) {
			return;

export default function ResponsiveBlockControlLabel( { property, viewport, desc } ) {
	const instanceId = useInstanceId( ResponsiveBlockControlLabel );
	const accessibleLabel = desc || sprintf( _x( 'Controls the %1$s property for %2$s viewports.', 'Text labelling a interface as controlling a given layout property (eg: margin) for a given screen size.' ), property, viewport.label );
	return (
		
			<span aria-describedby="{">
				{ viewport.label }
			</span>
			<span id="{">{ accessibleLabel }</span>
		
	);
}

export default function TextareaControl( { label, hideLabelFromVision, value, help, onChange, rows = 4, className, ...props } ) {
	const instanceId = useInstanceId( TextareaControl );
	const id = `inspector-textarea-control-${ instanceId }`;
	const onChangeValue = ( event ) => onChange( event.target.value );

	return (
		
			<textarea value="{" aria-describedby="{" rows="{" id="{">		&lt;/BaseControl&gt;
	);</textarea>

key={ name }
					help={ help }
					options={ options }
					selected={ fieldValue }
					onChange={ changeHandler }
				/>
			);
		}
		case 'SelectControl': {
			const {
				options,
				multiple,
				label,
			} = fieldOptions;

			const instanceId = useInstanceId( Select );
			const id = `inspector-select-control-${ instanceId }`;

			return (

export default function RadioControl( { label, className, selected, help, onChange, options = [] } ) {
	const instanceId = useInstanceId( RadioControl );
	const id = `inspector-radio-control-${ instanceId }`;
	const onChangeValue = ( event ) => onChange( event.target.value );

	return ! isEmpty( options ) && (
		
			{ options.map( ( option, index ) =>
				<div id="">
					</div>

export function MenuGroup( {
	children,
	className = '',
	label,
} ) {
	const instanceId = useInstanceId( MenuGroup );

	if ( ! Children.count( children ) ) {
		return null;
	}

	const labelId = `components-menu-group-label-${ instanceId }`;
	const classNames = classnames(
		className,
		'components-menu-group'
	);

	return (
		<div>
			{ label &amp;&amp;
				</div>