plugins – Replace Content material for a Customized Block Toolbar Button

I’m attempting to create a {custom} button on the Block Toolbar of the Full Website Editor. This button may insert {custom} content material to paragraphs, button textual content, or headings. However I do not know the right way to end my code. Right here is the code:

import { registerFormatType } from '@wordpress/rich-text';
import { BlockControls } from '@wordpress/block-editor';
import { ToolbarGroup, ToolbarButton, Button } from '@wordpress/elements';

/*
https://developer.wordpress.org/block-editor/reference-guides/elements/modal/
*/
import { Modal } from '@wordpress/elements';
import { useState } from '@wordpress/aspect';

const MyCustomButtonIcon = ( props ) => {    

    const [ isOpen, setOpen ] = useState( false );
    const openModal = () => setOpen( true );
    const closeModal = () => setOpen( false );
    


    return (
        <BlockControls>
            <ToolbarGroup>
                <ToolbarButton
                    icon="buddicons-activity"
                    title="Customized Icon"
                    onClick={ openModal }                    
                />
                { isOpen && (
                <Modal title="Search an Icon" onRequestClose={ closeModal }>
                    <Button onClick={'**What ought to I put right here to replace the content material?**'}>
                        Insert a factor
                    </Button>

                </Modal>
            ) }
            </ToolbarGroup>
        </BlockControls>
    );
};

registerFormatType( 'my-custom-format/my-sample-output', {
    title: 'Customized Icon',
    tagName: 'i',
    className: null,    
    attributes: {
        className: 'class'        
    },
    edit: MyCustomButtonIcon,
} );

Hope you possibly can assist me on this. What’s the perform that I want to make use of to replace the content material of the block?

Thanks very a lot.