Why is Gutenberg not saving the values in the sidebar?

Question

I have a Gutenberg sidebar with a toggle. It works beautifully but when I click Update or Publish, the value does not save. I even checked in the console and the value does change when I click the ToggleControl, but the minute I Publish or Update the page, the toggle returns an empty array. Is there something incorrect in my code or am I missing something?

import { registerPlugin } from "@wordpress/plugins";
import { PluginSidebar, PluginSidebarMoreMenuItem } from "@wordpress/edit-post";
import { __ } from "@wordpress/i18n";

import { Fragment } from '@wordpress/element';
import { withSelect, withDispatch } from '@wordpress/data';
import { compose } from '@wordpress/compose';
import { PanelBody, PanelRow, ToggleControl } from '@wordpress/components';

const ShowSideBarToggle = (props) => {



  return (
    <ToggleControl
    label={__('Show Sidebar?', 'starter')}
    checked={props.customPostMetaValue}
    onChange={props.setCustomPostMeta}
  />
  )
}

const CustomSidebarMeta = compose([
    withSelect(select => {
        return { customPostMetaValue: select('core/editor').getEditedPostAttribute('meta')['showSidebarAttribute'] }
    }),
    withDispatch(dispatch => {
        return { 
            setCustomPostMeta: function(value) {
                dispatch('core/editor').editPost({ meta: { showSidebarAttribute: value } });
            }
        }
    })
])(ShowSideBarToggle);

const MetaFields = () => {
  return (
    <Fragment>
        <PluginSidebarMoreMenuItem 
                target='meta-page-settings'
                >{__('Theme Settings', 'underscores')}</PluginSidebarMoreMenuItem>
        <PluginSidebar 
        name="meta-page-settings" 
        title="Gutenberg Settings Sidebar"
        >
          <PanelBody
          title={__('This is a panel section', 'awp')}
          initialOpen={true}
          >
            <PanelRow>
              <CustomSidebarMeta />
            </PanelRow>
          </PanelBody>
        </PluginSidebar>
    </Fragment>
  );
}

registerPlugin( 'page-layout-plugin', {
    icon: 'smiley',
    render: MetaFields
} );

Answer 1

Your code does work as expected; the catch is that the updated post meta is not actually saved unless you either manually save or update post. To confirm this, in the browser console, run:

wp.data.select( 'core/editor' ).getCurrentPost().meta.showSidebarAttribute;

Next, toggle "Show Sidebar?" and run same command - the value of showSidebarAttribute has not changed even though the rendered toggle state has.

Finally, save the post then run the command again, the post meta has now been updated. Reload the page and open the sidebar and the toggle state matches the post meta.

NB. I registered the post meta required to test your code as:

<?php
register_meta('post', 'showSidebarAttribute', array(
    'single' => true,
    'type' => 'boolean',
    'default' => true,
    'show_in_rest' => true
));