How to use the @wordpress/plugins.withPluginContext function in @wordpress/plugins

* const { registerPlugin } = wp.plugins;
 * const { PluginDocumentSettingPanel } = wp.editPost;
 *
 * const MyDocumentSettingTest = () => (
 * 		
 *			<p>My Document Setting Panel</p>
 *		
 *	);
 *
 *  registerPlugin( 'document-setting-test', { render: MyDocumentSettingTest } );
 * ```
 *
 * @return {WPElement} The WPElement to be rendered.
 */
const PluginDocumentSettingPanel = compose(
	withPluginContext( ( context, ownProps ) =&gt; {
		return {
			icon: ownProps.icon || context.icon,
			panelName: `${ context.name }/${ ownProps.name }`,
		};
	} ),
	withSelect( ( select, { panelName } ) =&gt; {
		return (
			{
				opened: select( 'core/edit-post' ).isEditorPanelOpened( panelName ),
				isEnabled: select( 'core/edit-post' ).isEditorPanelEnabled( panelName ),
			}
		);
	} ),
	withDispatch( ( dispatch, { panelName } ) =&gt; ( {
		onToggle() {
			return dispatch( 'core/edit-post' ).toggleEditorPanelOpened( panelName );

onClick={ togglePin }
							isToggled={ isPinned }
							aria-expanded={ isPinned }
						/>
					) }
				
				
					{ children }
				
			
		
	);
}

export default compose(
	withPluginContext( ( context, ownProps ) => {
		return {
			icon: ownProps.icon || context.icon,
			sidebarName: `${ context.name }/${ ownProps.name }`,
		};
	} ),
	withSelect( ( select, { sidebarName } ) => {
		const {
			getActiveGeneralSidebarName,
			isPluginItemPinned,
		} = select( 'core/edit-post' );

		return {
			isActive: getActiveGeneralSidebarName() === sidebarName,
			isPinned: isPluginItemPinned( sidebarName ),
		};
	} ),

* 	
 * 		
 * 			{ __( 'My sidebar content' ) }
 * 		
 * 	
 * );
 * ```
 *
 * @return {WPComponent} Plugin sidebar component.
 */
export default compose(
	withPluginContext( ( context, ownProps ) => {
		return {
			icon: ownProps.icon || context.icon,
			sidebarName: `${ context.name }/${ ownProps.name }`,
		};
	} ),
	withSelect( ( select, { sidebarName } ) => {
		const {
			getActiveGeneralSidebarName,
			isPluginItemPinned,
		} = select( 'core/edit-post' );

		return {
			isActive: getActiveGeneralSidebarName() === sidebarName,
			isPinned: isPluginItemPinned( sidebarName ),
		};
	} ),

const PluginSidebarMoreMenuItem = ( { children, icon, isSelected, onClick } ) => (
	
		{ ( fillProps ) => (
			<menuitem>
				{ children }
			</menuitem>
		) }
	
);

export default compose(
	withPluginContext( ( context, ownProps ) =&gt; {
		return {
			icon: ownProps.icon || context.icon,
			sidebarName: `${ context.name }/${ ownProps.target }`,
		};
	} ),
	withSelect( ( select, { sidebarName } ) =&gt; {
		const {
			getActiveGeneralSidebarName,
		} = select( 'core/edit-post' );

		return {
			isSelected: getActiveGeneralSidebarName() === sidebarName,
		};
	} ),
	withDispatch( ( dispatch, { isSelected, sidebarName } ) =&gt; {
		const {

* }
 *
 * const MyButtonMoreMenuItem = () => (
 * 	
 * 		{ __( 'My button title' ) }
 * 	
 * );
 * ```
 *
 * @return {WPElement} The element to be rendered.
 */
export default compose(
	withPluginContext( ( context, ownProps ) => {
		return {
			icon: ownProps.icon || context.icon,
		};
	} ),
)( PluginMoreMenuItem );

* const { PluginSidebarMoreMenuItem } = wp.editPost;
 *
 * const MySidebarMoreMenuItem = () => (
 * 	
 * 		{ __( 'My sidebar title' ) }
 * 	
 * );
 * ```
 *
 * @return {WPElement} The element to be rendered.
 */
export default compose(
	withPluginContext( ( context, ownProps ) => {
		return {
			icon: ownProps.icon || context.icon,
			sidebarName: `${ context.name }/${ ownProps.target }`,
		};
	} ),
	withSelect( ( select, { sidebarName } ) => {
		const {
			getActiveGeneralSidebarName,
		} = select( 'core/edit-post' );

		return {
			isSelected: getActiveGeneralSidebarName() === sidebarName,
		};
	} ),
	withDispatch( ( dispatch, { isSelected, sidebarName } ) => {
		const {

* 	
 * 		
 * 			{ __( 'My sidebar content' ) }
 * 		
 * 	
 * );
 * ```
 *
 * @return {WPElement} Plugin sidebar component.
 */
export default compose(
	withPluginContext( ( context, ownProps ) => {
		return {
			icon: ownProps.icon || context.icon,
			sidebarName: `${ context.name }/${ ownProps.name }`,
		};
	} ),
	withSelect( ( select, { sidebarName } ) => {
		const {
			getActiveGeneralSidebarName,
			isPluginItemPinned,
		} = select( 'core/edit-post' );

		return {
			isActive: getActiveGeneralSidebarName() === sidebarName,
			isPinned: isPluginItemPinned( sidebarName ),
		};
	} ),