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

'height',
	] );
	mediaProps.url =
		get( media, [ 'sizes', sizeSlug, 'url' ] ) ||
		get( media, [ 'media_details', 'sizes', sizeSlug, 'source_url' ] ) ||
		get( media, [ 'media_details', 'videopress', 'original' ] ) ||
		get( media, [ 'media_details', 'original', 'url' ] ) ||
		media.url;
	mediaProps.type = media.media_type || media.type;
	mediaProps.mime = media.mime_type || media.mime;
	mediaProps.width = mediaProps.width || get( media, [ 'media_details', 'width' ] );
	mediaProps.height = mediaProps.height || get( media, [ 'media_details', 'height' ] );
	return mediaProps;
};

export default withNotices( function StoryEdit( {
	attributes,
	className,
	isSelected,
	noticeOperations,
	noticeUI,
	setAttributes,
} ) {
	const { mediaFiles } = attributes;
	const { lockPostSaving, unlockPostSaving } = useDispatch( 'core/editor' );
	const lockName = 'storyBlockLock';

	const onSelectMedia = newMediaFiles => {
		const allMedia = newMediaFiles.map( file => pickRelevantMediaFiles( file ) );
		const uploadedMedias = allMedia.filter( media => ! isBlobURL( media.url ) );
		// prevent saving blob urls in mediaFiles block attribute
		if ( allMedia.length !== uploadedMedias.length ) {

setAttributes( { caption: value } ) }
							inlineToolbar
						/>
					) }
				
			
		);
		/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
	}
}

export default withNotices( AudioEdit );

{ this.state.progress !== null && this.state.total !== null
										? `${ this.state.progress } / ${ this.state.total }`
										: null }
								
							
						
					
				
			
		);
	}
}

export default withNotices( Settings );

if ( isResolvingUrl ) {
		return blockEmbedding;
	}

	const classes = `${ className } calendly-style-${ style }`;

	return (
		<div>
			{ inspectorControls }
			{ url &amp;&amp; ! isEditingUrl ? blockPreview( style ) : blockPlaceholder }
		</div>
	);
}

export default withNotices( CalendlyEdit );

);
		return (
			
				{ noticeUI }
				{ apiState === API_STATE_LOADING && placholderAPIStateLoading }
				{ apiState === API_STATE_FAILURE && placeholderAPIStateFailure }
				{ apiState === API_STATE_SUCCESS && placeholderAPIStateSuccess }
			
		);
	}
}

export default withNotices( MapEdit );

{ __( 'Shop Now', 'jetpack' ) }
					
				) }
			
		);
	};

	return (
		<div>
			{ inspectorControls }
			{ asin ? blockPreview() : blockPlaceholder }
		</div>
	);
}

export default withNotices( AmazonEdit );

setAuthenticated={ this.setAuthenticated }
								multiple={ multiple }
								path={ path }
								onChangePath={ this.onChangePath }
							/>
						
					
				);
			}
		}

		return withSelect( select => {
			return {
				postId: select( 'core/editor' ).getCurrentPostId(),
			};
		} )( withNotices( WithMediaComponent ) );
	} );
}

className="tiled-gallery__add-item-button"
								onChange={ this.uploadFromFiles }
								accept="image/*"
								icon="insert"
							>
								{ __( 'Upload an image', 'jetpack' ) }
							
						
					) }
				
			
		);
	}
}

export default withNotices( TiledGalleryEdit );

{ this.renderMembershipAmounts() }
								{ __( 'Or add another membership amount:', 'jetpack' ) }
								<br>
								{ this.renderAddMembershipAmount() }
								{ this.renderDisclaimer() }
							
						
					) }
				{ this.state.products &amp;&amp; inspectorControls }
				{ this.props.attributes.planId &amp;&amp; blockContent }
			
		);
	};
}

export default withNotices( MembershipsButtonEdit );

const previewUI = blockContent;

		return (
			
				{ noticeUI }
				{ preview && previewUI }
				{ ! preview && connected === API_STATE_LOADING && waiting }
				{ ! preview && connected === API_STATE_NOTCONNECTED && placeholder }
				{ ! preview && connected === API_STATE_CONNECTED && inspectorControls }
				{ ! preview && connected === API_STATE_CONNECTED && blockContent }
			
		);
	};
}

export default withNotices( MailchimpSubscribeEdit );