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

}

	// Form the new innerBlock list.
	const currentInnerBlocks = select( 'core/block-editor' ).getBlock( blockProps.clientId ).innerBlocks
	const newInnerBlocks = range( columns || 2 ).map( i => {
		return currentInnerBlocks[ i ] || createBlock( 'ugb/column', {}, [] )
	} )

	// Replace the current list of inner blocks.
	dispatch( 'core/block-editor' ).replaceInnerBlocks( blockProps.clientId, newInnerBlocks, false )

	return attributes
} )

export default compose(
	withState( { sortColumnHighlight: null } ),
	withUniqueClass,
	withSetAttributeHook,
	withGoogleFont,
	withTabbedInspector(),
	withContentAlignReseter(),
	withBlockStyles( createStyles, { editorMode: true } ),
)( edit )

}

export default compose(
	withSelect( ( select ) => ( {
		editedPostContent: select( 'core/editor' ).getEditedPostAttribute( 'content' ),
	} ) ),
	withDispatch( ( dispatch ) => {
		const {
			createNotice,
		} = dispatch( 'core/notices' );

		return {
			createNotice,
		};
	} ),
	withState( { hasCopied: false } )
)( CopyContentMenuItem );

setState( { hasCopied: true } ) }
			onFinishCopy={ () => setState( { hasCopied: false } ) }
		>
			{ hasCopied ? __( 'Copied!' ) : __( 'Copy All Content' ) }
		
	);
}

export default compose(
	withSelect( select => ( {
		editedPostContent: select( 'core/editor' ).getEditedPostAttribute( 'content' ),
	} ) ),
	withState( { hasCopied: false } )
)( CopyContentMenuItem );

switch ( effect.type ) {
			case 'COMPONENT_MOUNTED':
				const { value, setState } = props;

				fetchAttachmentsData( value ).then( ( attachmentsData ) => {
					setState( {
						attachmentsData: [ ...props.attachmentsData, ...attachmentsData ]
					} );
				} );

				break;
		}
	};
}

const applyWithState = withState( {
	attachmentsData: [],
	selectedItem: null
} );

const applyWithEffects = withEffects( aperture, { handler } );

export default compose(
	applyWithState,
	applyWithEffects
)( MediaGalleryField );

request.fail( () => {
					errorHandler();

					props.setState( {
						error: __( 'Not Found', 'carbon-fields-ui' ),
						isLoading: false
					} );
				} );

				break;
		}
	};
}

const applyWithState = withState( {
	embedCode: '',
	embedType: '',
	provider: '',
	error: '',
	isLoading: false
} );

const applyWithEffects = withEffects( aperture, { handler } );

export default compose(
	applyWithState,
	applyWithEffects
)( OembedField );

{ hovered &&  }
			
		
	);
}
export default compose(
	withState( { hovered: false } ),
	withSelect( ( select, ownProps ) => {
		const { getBlockCount, getBlockName, isBlockValid, getSettings, getTemplateLock } = select( 'core/block-editor' );

		const isEmpty = ! getBlockCount( ownProps.rootClientId );
		const isLastBlockDefault = getBlockName( ownProps.lastBlockClientId ) === getDefaultBlockName();
		const isLastBlockValid = isBlockValid( ownProps.lastBlockClientId );
		const { bodyPlaceholder } = getSettings();

		return {
			isVisible: isEmpty || ! isLastBlockDefault || ! isLastBlockValid,
			showPrompt: isEmpty,
			isLocked: !! getTemplateLock( ownProps.rootClientId ),
			placeholder: bodyPlaceholder,
		};
	} ),
	withDispatch( ( dispatch, ownProps ) => {

withClickOpenInspector( [
		[ '.ugb-accordion__title', 'title' ],
		[ '.ugb-accordion__arrow', 'arrow' ],
	] ),
	withSelect( ( select, { clientId } ) => {
		const {
			getBlock,
		} = select( 'core/block-editor' )

		const block = getBlock( clientId )

		return {
			hasInnerBlocks: !! ( block && block.innerBlocks.length ),
		}
	} ),
	withState( {
		openTimeout: null,
		isOpen: null,
	} )
)( edit )

options: props.value,
						field_id: hierarchyResolver()
					}
				)
					.then( ( response ) => {
						setState( {
							selectedOptions: [ ...selectedOptions, ...response ]
						} );
					} );

				break;
		}
	};
}

const applyWithState = withState( {
	options: [],
	selectedOptions: [],
	totalOptionsCount: 0,
	queryTerm: ''
} );

const applyWithEffects = withEffects( aperture, { handler } );

addFilter( 'carbon-fields.association.validate', 'carbon-fields/core', ( field, value ) => {
	const { min, required } = field;

	if ( required && isEmpty( value ) ) {
		return __( 'This field is required.', 'carbon-fields-ui' );
	}

	if ( min > 0 && value.length < min ) {

options: props.value.map( ( option ) => `${ option.id }:${ option.type }:${ option.subtype }` ).join( ';' ),
						field_id: hierarchyResolver()
					}
				)
					.then( ( response ) => {
						setState( {
							selectedOptions: [ ...selectedOptions, ...response ]
						} );
					} );

				break;
		}
	};
}

const applyWithState = withState( {
	options: [],
	selectedOptions: [],
	totalOptionsCount: 0,
	queryTerm: '',
	page: 1
} );

const applyWithEffects = withEffects( aperture, { handler } );

addFilter( 'carbon-fields.association.validate', 'carbon-fields/core', ( field, value ) => {
	const { min, required } = field;

	if ( required && isEmpty( value ) ) {
		return __( 'This field is required.', 'carbon-fields-ui' );
	}

import { parse, createBlock } from '@wordpress/blocks';
import { BlockEdit } from '@wordpress/block-editor';
import { Button, Placeholder, Spinner, Disabled } from '@wordpress/components';
import { compose, withState } from '@wordpress/compose';
import { withDispatch, withSelect } from '@wordpress/data';
import { Fragment, useEffect, useState, createRef } from '@wordpress/element';
import { __, sprintf } from '@wordpress/i18n';
import { addQueryArgs } from '@wordpress/url';

/**
 * Internal dependencies
 */
import './style.scss';

const TemplateEdit = compose(
	withState( { templateClientId: null } ),
	withSelect( ( select, { attributes, templateClientId } ) => {
		const { getEntityRecord } = select( 'core' );
		const { getCurrentPostId, isEditedPostDirty } = select( 'core/editor' );
		const { getBlock, getSelectedBlock } = select( 'core/block-editor' );
		const { isEditorSidebarOpened } = select( 'core/edit-post' );
		const { templateId } = attributes;
		const currentPostId = getCurrentPostId();
		const template = templateId && getEntityRecord( 'postType', 'wp_template_part', templateId );
		const editTemplateUrl = addQueryArgs( fullSiteEditing.editTemplateBaseUrl, {
			post: templateId,
			fse_parent_post: currentPostId,
		} );
		const selectedBlock = getSelectedBlock();

		return {
			currentPostId,