How to add template color in custom block option in WordPress Gutenberg editor sidebar?

The colors of the palette are stored in the block editor data. How do I retrieve colors from a theme when dealing with a similar problem using theme.json and a component I found by reading the Gutenberg source <ColorPalette>code . The key is to get the coloruseSelect('core/block-editor').getSettings().colors

Here is a simplified example block using theme colors :<ColorPalette>

import { registerBlockType } from '@wordpress/blocks';
import { ColorPalette, PanelBody } from '@wordpress/components';
import { useState } from '@wordpress/element';
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
import { useSelect } from '@wordpress/data';

registerBlockType('so-68876119/custom-colors', {
    title: 'Custom Colors',
    supports: {
        color: true
    },
    edit({ attributes, setAttributes }) {
        const MyColorPalette = () => {
                
            const [color, setColor] = useState(); // No default color set
                
            // Retrieve the themes color settings from the block editors' data
            const colors = useSelect('core/block-editor').getSettings().colors;
    
            return (
                <ColorPalette
                    colors={colors}
                    value={color}
                    onChange={(color) => setColor(color)}
                />
            );
        }
        return (
           <div {...useBlockProps()}>
                <InspectorControls>
                    <PanelBody title="Input border color">
                        <MyColorPalette />
                    </PanelBody>
                </InspectorControls>
                <h2>hello world</h2>
            </div>
        );
    },
    save() {
        return null;
    },
});