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

var newValues = selectedOptions.map(function (_ref3) {
        var value = _ref3.value;
        return value;
      });
      onChange(newValues);
      return;
    }

    onChange(event.target.value);
  }; // Disable reason: A select with an onchange throws a warning

  /* eslint-disable jsx-a11y/no-onchange */


  return !isEmpty(options) && createElement(BaseControl, {
    label: label,
    id: id,
    help: help,
    className: className
  }, createElement("select", _extends({
    id: id,
    className: "components-select-control__input",
    onChange: onChangeValue,
    "aria-describedby": !!help ? "".concat(id, "__help") : undefined,
    multiple: multiple
  }, props), options.map(function (option, index) {
    return createElement("option", {
      key: "".concat(option.label, "-").concat(option.value, "-").concat(index),
      value: option.value,
      disabled: option.disabled
    }, option.label);

// Re-map the prop to the local proxy handler to check whether
				// the event has already been handled.
				const proxiedPropName = 'on' + match[ 1 ];
				result[ proxiedPropName ] = this.proxyEvent;

				// Assign event -> propName into an instance variable, so as to
				// avoid re-renders which could be incurred either by setState
				// or in mapping values to a newly created function.
				this.eventMap[ match[ 1 ].toLowerCase() ] = proxiedPropName;
			}

			return result;
		}, {} );

		return createElement( tagName, { ref: forwardedRef, ...props, ...eventHandlers } );
	}
}

iconWithUpdatedFillColor( color: string, icon: Object ) {
		if ( 'string' === typeof icon.src ) {
			return (
				
			);
		} else if ( icon.src && ( icon.src.type === 'svg' || icon.src.type === SVG ) ) {
			return (
				<svg color="" style="{" xmlns="{" viewBox="{">
					{ icon.src.props.children }
				</svg>
			);
		} else if ( 'function' === typeof icon.src ) {
			if ( icon.src.prototype instanceof Component ) {
				return createElement( icon.src, { fill: color, size: styles.modalIcon.width } );
			}
			return icon.src( { fill: color, size: styles.modalIcon.width } );
		}
	}

/>
									) }
								/>
								  } />
								
							
						
					);
				} }
			/>
		);
	}
}

render(
	createElement( withWizard( PopupsWizard, [ 'jetpack', 'newspack-popups' ] ) ),
	document.getElementById( 'newspack-popups-wizard' )
);

const lessonElements = lessons.map(( lesson ) => {
            return (
                createElement('tr', {key: lesson.lesson_id},
                    createElement('td', null,
                        createElement('span', null, lesson.order + ' '),
                        createElement('a', {href: lesson.edit_link}, lesson.title )),
                    createElement('td', null,
                        createElement('a', {href:'#', onClick: ( e ) => { this.trashLesson( e, lesson.lesson_id )}}, 'Trash')))

            );
        });

return createElement('div', null,
            createElement( 'table', { className: 'wp-list-table widefat fixed striped posts' },
            createElement( 'tbody', null, lessonElements )),
            createElement( 'hr', null ),
            createElement( 'input', {type: 'text', name: 'add-new-lesson', value: this.state.inputText, onChange: (e) => {
                this.setState({inputText: e.target.value } );
                }}),
            createElement('a', {className: 'button button-primary button-large', onClick: ( e ) => { this.createNewLesson(e); }}, 'Add New')
        );
    }
}


ReactDOM.render( createElement(CourseOutline, {courseID: window.senseiLMSAdminEditCourseID}), document.getElementById( 'sensei-component-course-lesson-container' ) );

export const Path = ( props ) => createElement( 'path', props );
export const Polygon = ( props ) => createElement( 'polygon', props );

const lessonElements = lessons.map(( lesson ) => {
            return (
                createElement('tr', {key: lesson.lesson_id},
                    createElement('td', null,
                        createElement('span', null, lesson.order + ' '),
                        createElement('a', {href: lesson.edit_link}, lesson.title )),
                    createElement('td', null,
                        createElement('a', {href:'#', onClick: ( e ) => { this.trashLesson( e, lesson.lesson_id )}}, 'Trash')))

            );
        });


        return createElement('div', null,
            createElement( 'table', { className: 'wp-list-table widefat fixed striped posts' },
            createElement( 'tbody', null, lessonElements )),
            createElement( 'hr', null ),
            createElement( 'input', {type: 'text', name: 'add-new-lesson', value: this.state.inputText, onChange: (e) => {
                this.setState({inputText: e.target.value } );
                }}),
            createElement('a', {className: 'button button-primary button-large', onClick: ( e ) => { this.createNewLesson(e); }}, 'Add New')
        );
    }
}

headerIcon={  }
									headerText={ __( 'SEO' ) }
									subHeaderText={ __( 'Search engine and social optimization' ) }
								/>
							) }
						/>
						
					
				
			
		);
	}
}

render(
	createElement( withWizard( SEOWizard, [ 'wordpress-seo', 'jetpack' ] ) ),
	document.getElementById( 'newspack-seo-wizard' )
);

const lessonElements = lessons.map(( lesson ) => {
            return (
                createElement('tr', {key: lesson.lesson_id},
                    createElement('td', null,
                        createElement('span', null, lesson.order + ' '),
                        createElement('a', {href: lesson.edit_link}, lesson.title )),
                    createElement('td', null,
                        createElement('a', {href:'#', onClick: ( e ) => { this.trashLesson( e, lesson.lesson_id )}}, 'Trash')))

            );
        });