Cacher is the code snippet organizer for pro developers

const { registerPlugin } = wp.plugins;
const { PluginSidebar } = wp.editPost;
const { useSelect, useDispatch } = wp.data;
const { PanelBody, PanelRow, TextControl } = wp.components;

const PLUGIN_NAME = 'my-plugin-sidebar';

/**
 * Note: sidebar_plugin_meta_block_field needs to be register_post_meta() in PHP
 */

const Render = () => {
	const value = useSelect( ( select ) => {
		const { sidebar_plugin_meta_block_field = '' } = select(
			'core/editor',
		).getEditedPostAttribute( 'meta' );
		return sidebar_plugin_meta_block_field;
	} );

	const { editPost } = useDispatch( 'core/editor' );
	const setValue = ( value ) => {
		editPost( {
			meta: { sidebar_plugin_meta_block_field: value },
		} );
	};

	return (
		<PluginSidebar
			name={ PLUGIN_NAME }
			icon="admin-post" // https://developer.wordpress.org/resource/dashicons/
			title="My plugin sidebar"
		>
			<PanelBody
				title="Title 1"
				icon="carrot" // https://developer.wordpress.org/resource/dashicons/
				opened={ true }
				className={ `${ PLUGIN_NAME }__panel1` }
				onToggle={ () => {} }
				initialOpen={ true }
			>
				<TextControl
					label="My field"
					value={ value }
					onChange={ setValue }
				/>
			</PanelBody>
			<PanelBody
				title="Title 2"
				icon="carrot" // https://developer.wordpress.org/resource/dashicons/
				className={ `${ PLUGIN_NAME }__panel2` }
				onToggle={ () => {} }
				initialOpen={ false }
			>
				<PanelRow>My Panel Inputs and Labels</PanelRow>
			</PanelBody>
		</PluginSidebar>
	);
};

registerPlugin( PLUGIN_NAME, {
	render: Render,
} );