How to properly extend Gutenberg block core/quote block?

Hi,

I’m new to building and extending Gutenberg blocks. I try to extend the core/quote block of Gutenberg by adding an extra color panel for the quote style: ‘large’. This to control the color of a quote symbol I added by a css pseudo selector:

blockquote.wp-block-quote.is-style-large::before {
    display: inline-block;
    font-size: 4rem;
    line-height: 1;
    content: '"';
    position: relative;
}
// Adding this by selected color:
.has-green-quote-color::before {
    color: #00AA78;
}

Below is the code I have now. The probleem is that it doesn’t correctly update the quote color in the editor. Any idea how to fix this? And How to better organize this code?

/**
 * External Dependencies
 */
import {assign} from 'lodash';

/**
 * WordPress Dependencies
 */
import {__} from '@wordpress/i18n';
import {addFilter} from '@wordpress/hooks';
import {createHigherOrderComponent} from '@wordpress/compose';
import {Fragment} from '@wordpress/element';
import {PanelBody} from '@wordpress/components';

import {
    getColorClassName,
    InspectorControls,
    getColorObjectByColorValue,
    PanelColorSettings
} from '@wordpress/editor';

// Enable quote color control on the following blocks
const enableQuoteColorControlOnBlocks = [
  'core/quote',
];

/**
 * Add quote color control attribute to block.
 *
 * @param {object} settings Current block settings.
 * @param {string} name Name of block.
 *
 * @returns {object} Modified block settings.
 */
const addQuoteColorControlAttribute = (settings, name) => {
  // Do nothing if it's another block
    if (!enableQuoteColorControlOnBlocks.includes(name)) {
        return settings;
    }

    if (typeof settings.attributes !== 'undefined') {
        settings.attributes = assign(settings.attributes, {
            quoteColor: {
                type: 'string',
                default: '#00aa78',
            },
        });
    }

    return settings;
};
addFilter('blocks.registerBlockType', 'smdzr-block/attribute/quoteColor', addQuoteColorControlAttribute);

/**
 * add quoteColor control to inspector controls of block.
 */
const withQuoteColorControl = createHigherOrderComponent((BlockEdit) => {
    return (props) => {

      // Do nothing if it's another block.
        if (!enableQuoteColorControlOnBlocks.includes(props.name)) {
            return (
              <BlockEdit {...props} />
            );
        }

        const isStyle = RegExp(/is-style-large/);

        if (!isStyle.test(props.attributes.className)) {
            return (
              <BlockEdit {...props} />
            );
        }

        const {quoteColor} = props.attributes;

        if (quoteColor) {
            const settings = wp.data.select('core').getThemeSupports();
            const colorObject = getColorObjectByColorValue(settings['editor-color-palette'], quoteColor);

            if (colorObject) {
                lodash.assign(props.attributes, {
                    className: ('is-style-large ' + getColorClassName(
                        'quote-color',
                        colorObject.slug
                    )),
                });
            }
        }

        return (
          <Fragment>
            <BlockEdit {...props} />
            <InspectorControls>
              <PanelBody title={__('Quote')} initialOpen={true}>
                <PanelColorSettings title={__('Kleur instellen')} colorSettings={
                    [{
                        value: props.attributes.quoteColor,
                        onChange: (color) => props.setAttributes({quoteColor: color}),
                        label: __('Kleur quote symbool'),
                    },]
                  }/>
              </PanelBody>
            </InspectorControls>
          </Fragment>
      );
    };
}, 'withQuoteColorControl');

addFilter('editor.BlockEdit', 'smdzr-block/with-quoteColor-control', withQuoteColorControl);