How to use the @wordpress/element.renderToString function in @wordpress/element

const normalizeAttribute = ( definition, value ) => {
			if ( isHTMLAttribute( definition ) && isArray( value ) ) {
				// Introduce a deprecated call at this point
				// When we're confident that "children" format should be removed from the templates.

				return renderToString( value );
			}

			if ( isQueryAttribute( definition ) && value ) {
				return value.map( ( subValues ) => {
					return normalizeAttributes( definition.query, subValues );
				} );
			}

			return value;
		};

<div>
					</div>

fields.forEach( ( field ) => {
		// Our renderField may or may not take a setAttributes function as a parameter.
		const fieldComponent = ( 'function' === typeof setAttributes )
			? renderField( field, attributes, setAttributes )
			: renderField( field, attributes );

		if ( !! fieldComponent ) {
			savedProps[ field.name ] = { ...fieldComponent.props };
		}

		const renderedField = !! fieldComponent ? renderToString( fieldComponent ) : '';

		htmlWithRenderedFields = htmlWithRenderedFields.replace(
			new RegExp( `{@${ field.name }}`, 'g' ),
			renderedField
		);
	} );

function writeInterstitialMessage (targetDocument) {
  let markup = renderToString(
    <div>
      { /* GUTENBERG-JS <svg viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg">
				<path fill="none" d="M48 12c19.9 0 36 16.1 36 36S67.9 84 48 84 12 67.9 12 48s16.1-36 36-36"></path>
				<path fill="none" d="M69.5 46.4c0-3.9-1.4-6.7-2.6-8.8-1.6-2.6-3.1-4.9-3.1-7.5 0-2.9 2.2-5.7 5.4-5.7h.4C63.9 19.2 56.4 16 48 16c-11.2 0-21 5.7-26.7 14.4h2.1c3.3 0 8.5-.4 8.5-.4 1.7-.1 1.9 2.4.2 2.6 0 0-1.7.2-3.7.3L40 67.5l7-20.9L42 33c-1.7-.1-3.3-.3-3.3-.3-1.7-.1-1.5-2.7.2-2.6 0 0 5.3.4 8.4.4 3.3 0 8.5-.4 8.5-.4 1.7-.1 1.9 2.4.2 2.6 0 0-1.7.2-3.7.3l11.5 34.3 3.3-10.4c1.6-4.5 2.4-7.8 2.4-10.5zM16.1 48c0 12.6 7.3 23.5 18 28.7L18.8 35c-1.7 4-2.7 8.4-2.7 13zm32.5 2.8L39 78.6c2.9.8 5.9 1.3 9 1.3 3.7 0 7.3-.6 10.6-1.8-.1-.1-.2-.3-.2-.4l-9.8-26.9zM76.2 36c0 3.2-.6 6.9-2.4 11.4L64 75.6c9.5-5.5 15.9-15.8 15.9-27.6 0-5.5-1.4-10.8-3.9-15.3.1 1 .2 2.1.2 3.3z"></path>
			</svg> */}
      <p>{ __('Generating preview…') }</p>
    </div>
  );

  markup += `
		<style>
			body {
				margin: 0;
			}
			.editor-post-preview-button__interstitial-message {
				display: flex;</style>

export const svgRenderToString = ( svgComponent, esc = true ) => {
	const s = renderToString( svgComponent )
		.replace( /viewbox/i, 'viewBox' )

	if ( esc ) {
		return s.replace( /#/g, '%23' ) // Using unescaped '#' characters in a data URI body is deprecated and will be removed in M71, around December 2018. Please use '%23' instead. See https://www.chromestatus.com/features/5656049583390720 for more details.
	}
	return s
}

export function fallback( url, onReplace ) {
	const link = <a href="{">{ url }</a>;
	onReplace(
		createBlock( 'core/paragraph', { content: renderToString( link ) } )
	);
}

return ( attributes ) => {
			const { editor } = this.props;

			if ( attributes ) {
				editor.insertContent( renderToString( save( attributes ) ) );
			}

			this.setState( { selected: null } );
		};
	}

function writeInterstitialMessage( targetDocument ) {
	let markup = renderToString(
		<div>
			<svg viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg">
				<path fill="none" d="M48 12c19.9 0 36 16.1 36 36S67.9 84 48 84 12 67.9 12 48s16.1-36 36-36"></path>
				<path fill="none" d="M69.5 46.4c0-3.9-1.4-6.7-2.6-8.8-1.6-2.6-3.1-4.9-3.1-7.5 0-2.9 2.2-5.7 5.4-5.7h.4C63.9 19.2 56.4 16 48 16c-11.2 0-21 5.7-26.7 14.4h2.1c3.3 0 8.5-.4 8.5-.4 1.7-.1 1.9 2.4.2 2.6 0 0-1.7.2-3.7.3L40 67.5l7-20.9L42 33c-1.7-.1-3.3-.3-3.3-.3-1.7-.1-1.5-2.7.2-2.6 0 0 5.3.4 8.4.4 3.3 0 8.5-.4 8.5-.4 1.7-.1 1.9 2.4.2 2.6 0 0-1.7.2-3.7.3l11.5 34.3 3.3-10.4c1.6-4.5 2.4-7.8 2.4-10.5zM16.1 48c0 12.6 7.3 23.5 18 28.7L18.8 35c-1.7 4-2.7 8.4-2.7 13zm32.5 2.8L39 78.6c2.9.8 5.9 1.3 9 1.3 3.7 0 7.3-.6 10.6-1.8-.1-.1-.2-.3-.2-.4l-9.8-26.9zM76.2 36c0 3.2-.6 6.9-2.4 11.4L64 75.6c9.5-5.5 15.9-15.8 15.9-27.6 0-5.5-1.4-10.8-3.9-15.3.1 1 .2 2.1.2 3.3z"></path>
			</svg>
			<p>{ __( 'Generating preview…' ) }</p>
		</div>
	);

	markup += `
		<style>
			body {
				margin: 0;
			}
			.editor-post-preview-button__interstitial-message {
				display: flex;</style>

insertCompletion( replacement ) {
		const { open, query } = this.state;
		const { record, onChange } = this.props;
		const end = record.start;
		const start = end - open.triggerPrefix.length - query.length;
		const toInsert = create( { html: renderToString( replacement ) } );

		onChange( insert( record, toInsert, start, end ) );
	}

export function getSaveContent( blockTypeOrName, attributes, innerBlocks ) {
	const blockType = normalizeBlockType( blockTypeOrName );

	return renderToString( getSaveElement( blockType, attributes, innerBlocks ) );
}