React-Quill: Open a custom popup before firing custom toolbar button handler

Question

I am using react-quill in my react application. I have the editor all set up and ready to use. I have added a custom-button in the toolbar. That custom-button basically allows to the user to insert "button" in the editor area. There is a popup component which asks user to enter button-name, button-text-color, button-background-color and button-link. Based on these parameters, ditto' button is added in the editor.

The popup component is toggled using state:

this.state = {
    openPopup: false
}

const CustomButton = () => <>CTA</>

const CustomToolbar = () => (
    <div id="toolbar">
        <select className="ql-header" defaultValue={""} onChange={e => e.persist()}>
            <option value="1" />
            <option value="2" />
            <option selected />
        </select>
        <button className="ql-bold" />
        <button className="ql-italic" />
        <button class="ql-script" value="sub"></button>
        <button class="ql-script" value="super"></button>
        <select className="ql-color">
            <option value="red" />
            <option value="green" />
            <option value="blue" />
            <option value="orange" />
            <option value="violet" />
            <option value="#d0d1d2" />
            <option selected />
        </select>
        <button className="ql-insertCta">
            <CustomButton />
        </button>
    </div>
);

this.modules = {
            toolbar: {
                container: "#toolbar",
                handlers: {
                    insertCta: function () {
                        const cursorPosition = this.quill.getSelection().index
                        this.quill.insertEmbed(cursorPosition, 'span', 'user')
                        this.quill.setSelection(cursorPosition + 1)
                    }
                },
            },
            clipboard: {
                matchVisual: false,
            }
        };

const BlockEmbed = Quill.import('blots/block/embed');

        let ctaTool = this.generateButton()

        class CtaBlot extends BlockEmbed {
            static create(value) {
                let node = super.create(value);
                node.innerHTML = ctaTool;
                return node;
            }
        }

        CtaBlot.blotName = 'span';
        CtaBlot.tagName = 'span';
        CtaBlot.className = 'cta-button'

        Quill.register(CtaBlot);

<ReactQuill
   theme={"snow"}
   modules={this.modules}
   formats={this.formats}
   value={this.state.textEditorData}
   onChange={this.onEditorChange}
   placeholder={"Write page content here..."}
>
</ReactQuill>

insertCta function works as expected. How do i open the popop and then onClick of save button in the popup, the "insertCta" function is fired? Currently the "insertCta" function works if fired directly. I want the user to customise the button appearance from the popup.

Popup: popup to configure cta

Editor: editor with custom button in toolbar

CTA Button: editor when cta button is added

Any help is greatly appreciated!