How to store Gutenberg ColourPicker RGBA as metadata

I’m trying to build a sidebar plugin for Gutenberg which uses the ColorPicker component to store a chosen rgba value in metadata using withSelect and withDispatch (I’m testing below with the hex value).

The plugin is generally working as it should; it picks a colour, sets the prop and displays the value in the input field.

I just can’t seem to get the data to save in the metadata for some reason, despite the code being similar to another ‘post-picker’ plugin which I built, and that one works perfectly fine.

Here’s my code, any help on getting this to save would be greatly appreciated:

import { __ } from '@wordpress/i18n';
import { registerPlugin, } from '@wordpress/plugins';
import { PluginSidebar, PluginSidebarMoreMenuItem, } from '@wordpress/edit-post';
import { PanelBody, ColorPicker } from '@wordpress/components';
import { withSelect, withDispatch } from '@wordpress/data'
import { compose, } from '@wordpress/compose'

let PageColourSettings = (props) => {
    return (
        <>
            <PanelBody
                title={__('Page Colour', 'my-gutenberg-blocks')}
                icon='dashicons-art'
                initialOpen={true}
            >
                <ColorPicker
                    color={ props.page_colour }
                    // onChangeComplete={ ( value ) => ( console.log(value.rgb) ) }
                    onChangeComplete={ (value) => props.onPageColourChange(value.hex) }
                    // onChangeComplete={ (value) => { wp.data.dispatch('core/editor').editPost({meta:{_my_blocks_page_colour:value}}) } }
                />

                {console.log( props )}
                <label htmlFor="currentColour">{ __('Current page colour (rgba)', 'my-gutenberg-blocks') }</label>
                <input id={`currentColour`} defaultValue={props.page_colour} readOnly />
            </PanelBody>

        </>
    )
}


PageColourSettings = compose([
    withSelect(
        (select) => {
            return {
                page_colour: select('core/editor').getEditedPostAttribute('meta')['_my_blocks_page_colour']
            }
        }
    ),
    withDispatch(
        ( dispatch, props ) => {
            return {
                onPageColourChange: (value) => {
                    page_colour: dispatch('core/editor').editPost({ meta: { _my_blocks_page_colour: value } });
                }
            }
        }
    ),
])(PageColourSettings);


registerPlugin(my-gutenberg-blocks-page-colour-sidebar', {
    icon: 'welcome-widgets-menus',

    render: () => {
        return (
            <>
                <PluginSidebarMoreMenuItem
                    target="posts-metabox-sidebar"
                >
                {__('Additional Options', 'my-gutenberg-blocks')}
                </PluginSidebarMoreMenuItem>
                <PluginSidebar
                    name="posts-metabox-sidebar"
                    icon=""
                    title={__('Additional Options', 'my-gutenberg-blocks')}
                >
                    <PageColourSettings />
                </PluginSidebar>
            </>
        )
    }
})

Update:
I have figured out what the problem was; it was that the meta wasn’t registered in PHP for that particular field. Here’s the code if anyone wishes to use it:

add_action( 'init', 'my_blocks_register_meta' );
function my_blocks_register_meta() {
    register_meta('page', '_my_blocks_page_colour', array(
        'show_in_rest' => true,
        'type' => 'string',
        'single' => true,
        'sanitize_callback' => 'sanitize_text_field',
        'auth_callback' => function() {
            return current_user_can('edit_posts');
        }
    ));
}

If you wish to store the rgba in the meta; in the <ColorPicker component, change the onChangeComplete to:

onChangeComplete={ (value) => props.onPageColourChange('rgba(' + value.rgb.r + ', ' + value.rgb.g + ', ' + value.rgb.b + ', ' + value.rgb.a + ')') }