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

isDismissable, //Deprecated
			// Many of the documented props for Modal are passed straight through
			// to the ModalFrame component and handled there.
			...otherProps
		} = this.props;

		const headingId = aria.labelledby || `components-modal-header-${ instanceId }`;

		if ( isDismissable ) {
			deprecated( 'isDismissable prop of the Modal component', {
				alternative: 'isDismissible prop (renamed) of the Modal component',
			} );
		}
		// Disable reason: this stops mouse events from triggering tooltips and
		// other elements underneath the modal overlay.
		return createPortal(
			
				<div role="document" tabindex="0">
					</div>

render() {
		// Use React portal to render components directly into the info window.
		return this.el ? createPortal( this.props.children, this.el ) : null;
	}
	closeClick = () => {

}
		unregisterFill( ref.current.name, ref.current );
		ref.current.name = name;
		registerFill( name, ref.current );
	}, [ name ] );

	if ( ! slot || ! slot.node || ! slot.props.bubblesVirtually ) {
		return null;
	}

	// If a function is passed as a child, provide it with the fillProps.
	if ( isFunction( children ) ) {
		children = children( slot.props.fillProps );
	}

	return createPortal( children, slot.node );
}

const {
	showLocalSEOUpsell,
	localSEOUpsellURL,
	brushstrokeBackgroundURL,
	knowledgeGraphCompanyInfoMissing,
} = wpseoSearchAppearance;

render(
	
		
			
				
				{ createPortal( , wpUserSelector ) }
				{ companyInfoMissingElement && createPortal(
					,
					companyInfoMissingElement
				) }
				{ showLocalSEOUpsell && createPortal(
					,
					localSEOElement
				) }

render() {
		return createPortal(
			this.props.children,
			this.el,
		);
	}
}

function InOverlayWithRef( { zIndex, pointerEvents, render, children }, ref ) {
	const { container, overlay } = useContext( Context );
	if ( ! container || ! overlay ) {
		return null;
	}
	const slot = (
		 evt.stopPropagation() }>
			{ render ? render( { container, overlay } ) : children }
		
	);
	return createPortal( slot, overlay );
}

showLocalSEOUpsell,
	localSEOUpsellURL,
	brushstrokeBackgroundURL,
	knowledgeGraphCompanyInfoMissing,
} = wpseoSearchAppearance;

render(
	
		
			
				
				{ createPortal( , wpUserSelector ) }
				{ companyInfoMissingElement && createPortal(
					,
					companyInfoMissingElement
				) }
				{ showLocalSEOUpsell && createPortal(
					,
					localSEOElement
				) }
			
		
	,

if ( location === "sidebar" ) {
						return (
							
								{ this.renderResults() }
							
						);
					}

					if ( location === "metabox" ) {
						return createPortal(
							
								
								{ this.renderResults() }
							,
							document.getElementById( "wpseo-metabox-readability-root" )
						);
					}
				} }

{ createPortal( , wpUserSelector ) }
				{ companyInfoMissingElement && createPortal(
					,
					companyInfoMissingElement
				) }
				{ showLocalSEOUpsell && createPortal(
					,
					localSEOElement
				) }
			
		
	,
	element
);

getWebPreviewModal = () => {
		const { url } = this.props;
		const { device, loaded, isPreviewVisible } = this.state;

		if ( ! this.modalDOMElement || ! isPreviewVisible ) {
			return null;
		}

		const classes = classnames(
			'newspack-web-preview__container',
			device,
			loaded && 'newspack-web-preview__is-loaded'
		);

		return createPortal(
			<div>
				<div>
					<div>
						<div>
							<button> this.setState( { device: 'desktop' } ) }
								isPrimary={ 'desktop' === device }
								isSecondary={ 'desktop' !== device }
								className="is-desktop"
							&gt;
								
								<span>{ __( 'Preview desktop size' ) }</span>
							</button>
							<button> this.setState( { device: 'tablet' } ) }
								isPrimary={ 'tablet' === device }</button></div></div></div></div>