Getting meta in editor plugin, and event triggering issue

I have a Custom Post Type defined with custom-fields support. I then registered a meta field.

The first issue is that select( 'core/editor' ).getEditedPostAttribute( 'meta' )._vaenc_actu_roles_scope_roles always returns undefined on first call (before being updated by dispatch( 'core/editor' ).editPost). Also, when I save the Custom post Type the value isn’t modified in the database.

The other issue is, when check any of the checkboxes, on first click, isChecked() is properly called, on next clicks it doesn’t happen, but updateMeta() is triggered. If I fold/unfold the control or uncheck a checkbox, all the checkboxes do get updated by calling isChecked():

animation example of second issue

Here is my code:

class Metaboxes extends Base {      /**      * Setup user.      */     public function setup() {         add_action('init', [$  this, 'init'] );     }      public function init () {         register_post_meta(             'vaenc_actu',             '_vaenc_actu_roles_scope_roles',             [                 'show_in_rest' => true,                 'single'       => true,                 'type'         => 'array',                 'default'       => [],                 'auth_callback' => function() {                     return current_user_can( 'edit_posts' );                 }             ]         );     } } 

My javascript is like so:

const {registerPlugin}                              = wp.plugins; const {PluginDocumentSettingPanel}                  = wp.editPost; const {PanelBody, CheckboxControl}                  = wp.components; const {useSelect, select, withSelect, withDispatch} = wp.data; const {Fragment, useState}                          = wp.element; const {__}                                          = wp.i18n; const {compose}                                     = wp.compose;  const RolesControl = ( {isChecked, updateMeta} ) => {     return (         <>             <Fragment intialOpen={true}>                 <CheckboxControl                     label={__( "PRI", "vae" )}                     checked={isChecked( 'vae-pri' )}                     onChange={( value ) => updateMeta( 'vae-pri', value )}                 />                 <CheckboxControl                     label={__( "PRC", "vae" )}                     checked={isChecked( 'vae-prc' )}                     onChange={( value ) => updateMeta( 'vae-prc', value )}                 />                 <CheckboxControl                     label={__( "Certificateurs", "vae" )}                     checked={isChecked( 'vae-certif' )}                     onChange={( value ) => updateMeta( 'vae-certif', value )}                 />             </Fragment>         </>     ) }  const RolesField = compose( [     withSelect( () => {         return {             actu_scope_meta: select( 'core/editor' ).getEditedPostAttribute( 'meta' )._vaenc_actu_roles_scope_roles,         };     } ),     withDispatch( ( dispatch ) => ({         isChecked ( prop ) {             let meta = select( 'core/editor' ).getEditedPostAttribute( 'meta' )._vaenc_actu_roles_scope_roles;             if ( meta ) {                 return meta.includes( prop );             }             return false         },         updateMeta ( prop, value ) {             let meta = select( 'core/editor' ).getEditedPostAttribute( 'meta' )._vaenc_actu_roles_scope_roles;             if ( !meta ) meta = []              if ( meta.includes( prop ) && !value ) {                 meta = meta.filter( arrayItem => arrayItem !== prop );             } else if ( !meta.includes( prop ) ) {                 meta.push( prop );             }              dispatch( 'core/editor' ).editPost( {meta: {_vaenc_actu_roles_scope_roles: meta}} );         },     }) ), ] )( RolesControl );  const Render = () => {     const postType = useSelect( select => select( 'core/editor' ).getCurrentPostType() );     if ( 'vaenc_actu' !== postType ) {         return null;     }      return (         <>             <PluginDocumentSettingPanel                 name="vae-role-scope-sidebar"                 title={__( 'Restrictions', 'vae' )}             >                 <RolesField/>             </PluginDocumentSettingPanel>         </>     ) }  registerPlugin( 'vae-role-scope-sidebar', {     render: Render } )