How to use the @ckeditor/ckeditor5-widget/src/utils.toWidget function in @ckeditor/ckeditor5-widget

view: ( modelElement, viewWriter ) => {
				// Create the widget view element.
				const div = toWidget( createSuperFieldElement( viewWriter, modelElement ), viewWriter );

				// Create a wrapper for custom UI (must use UIElement!).
				const renderFunction = createCustomUIRenderer( editor, modelElement );
				const customUIWrapper = viewWriter.createUIElement( 'div', {}, renderFunction );

				// And insert it inside the widget element.
				viewWriter.insert( viewWriter.createPositionAt( div, 0 ), customUIWrapper );

				// Returns the following structure:
				//
				// 	<div>				   // widget element
				//		<div>			   // UIElement (wrapper for the custom UI)
				//			<button>
				//			<input>      // will be turned into a jQuery date picker
				//			
				//		</button></div></div>

export function toFormWidget( widget, viewElement ) {

  // const symbol = Symbol(widget);
  // symbols[widget] = symbol
  viewElement.setCustomProperty( formSymbol, true );
  const label = 'form'
  // return toWidget( viewElement, { label: labelCreator } );
  return toWidget( viewElement, { label: label } );

  // function labelCreator() {
  //   const imgElement = viewElement.getChild( 0 );
  //   const imgSrc = imgElement.getAttribute( 'img-src' );
  //
  //   return imgSrc ? `${ imgSrc } ${ label }` : label;
  // }
}

view: ( modelElement, viewWriter ) => {
					const viewContainerElement = viewWriter.createContainerElement( 'div', { class: 'media' } );

					toWidget( viewContainerElement, viewWriter );

					const viewMediaElement = viewWriter.createUIElement( 'div', { class: 'media-preview' }, function( domDocument ) {
						const domElement = this.toDomElement( domDocument );

						domElement.innerText = 'PLACEHOLDER';

						if ( modelElement.hasAttribute( 'id' ) ) {
							previewService
								.get( modelElement.getAttribute( 'id' ) )
								.then( preview => {
									domElement.innerText = preview;
								} );
						}

						return domElement;
					} );

view: ( modelItem, writer ) => {
					const b = writer.createAttributeElement( 'b' );
					const div = writer.createContainerElement( 'div' );

					writer.insert( ViewPosition._createAt( div, 0 ), b );

					return toWidget( div, writer, { label: 'element label' } );
				}
			} )

view: ( modelItem, viewWriter ) => {
				const widgetElement = viewWriter.createContainerElement( 'figure', { class: 'fancy-widget' } );
				viewWriter.insert( viewWriter.createPositionAt( widgetElement, 0 ), viewWriter.createText( 'widget' ) );

				return toWidget( widgetElement, viewWriter );
			}
		} );

view: ( modelItem, viewWriter ) => {
				return toWidget( viewWriter.createContainerElement( 'table' ), viewWriter );
			}
		} );

export function toAcasiWidget( viewElement, label ) {
  viewElement.setCustomProperty( acasiSymbol, true );
  label = 'acasi'
  return toWidget( viewElement, { label: labelCreator } );

  function labelCreator() {
    const imgElement = viewElement.getChild( 0 );
    const imgSrc = imgElement.getAttribute( 'img-src' );

    return imgSrc ? `${ imgSrc } ${ label }` : label;
  }
}

export function toImageWidget( viewElement, writer, label ) {
	writer.setCustomProperty( 'image', true, viewElement );

	return toWidget( viewElement, writer, { label: labelCreator } );

	function labelCreator() {
		const imgElement = viewElement.getChild( 0 );
		const altText = imgElement.getAttribute( 'alt' );

		return altText ? `${ altText } ${ label }` : label;
	}
}

export function toTableWidget( viewElement, writer ) {
	writer.setCustomProperty( 'table', true, viewElement );

	return toWidget( viewElement, writer, { hasSelectionHandle: true } );
}

export function toMediaWidget( viewElement, writer, label ) {
	writer.setCustomProperty( 'media', true, viewElement );

	return toWidget( viewElement, writer, { label } );
}