WordPress Gutenberg sidebar for components that can update metadata

sidebar.js

const { __ } = wp.i18n; // Import __() from wp.i18n
const el = wp.element.createElement;
const {Fragment} = wp.element;
const { registerPlugin } = wp.plugins;
const { PluginSidebar, PluginSidebarMoreMenuItem } = wp.editPost;
import {MetaTextControl, MetaSelectControl} from './metadata_components.js';

//add to todument sidebar component
const PluginMetaDemo = function() {
	return (
		el(
			//specify we want to add to existing sidebar that includes document info
			wp.editPost.PluginPostStatusInfo, 
			{},
<div>
<MetaSelectControl
		label="Demo Field Select"
		metaKey="_demo_select"
		options={ [
			{ label: 'Not Set', value: '' },
			{ label: 'Yes', value: '1' },
			{ label: 'No', value: '0' },
		] }
	/>
<MetaTextControl
label="Demo Text Control"
metaKey="_demo_text_field" />
</div>
		)
	);
}

//add to document sidebar
wp.plugins.registerPlugin( 'meta-demo-sidebar-plugin', {
	render: PluginMetaDemo,
} );	

// separate sidebar with its own icon
const PluginMetaDemo2 = () => {
//the Fragment component wraps around PluginSidebarMoreMenuItem, which adds a menu item, and the UI components to appear in the sidebar itself.
return(
		<Fragment>
		<PluginSidebarMoreMenuItem target="meta-sidebar-extra" icon="smiley">meta-demo</PluginSidebarMoreMenuItem>
        <PluginSidebar
            name='meta-sidebar-extra'
            title='meta-demo'
            icon="smiley"
        >
<div>
<MetaSelectControl
		label="Demo Field Select"
		metaKey="_demo_select"
		options={ [
			{ label: 'Not Set', value: '' },
			{ label: 'Yes', value: '1' },
			{ label: 'No', value: '0' },
		] }
	/>
<MetaTextControl
label="Demo Text Control"
metaKey="_demo_text_field" />
</div>
</PluginSidebar>
</Fragment>
    )
}

registerPlugin( 'meta-sidebar-extra', { render: PluginMetaDemo2 } );