How to trigger a popup model (A React Component) from CKEditor 5 plugin button inside toolbar?

Requirement: Create a plugin that should have a button in the toolbar, On click should open a popup window which is a react component defined outside the plugin component.

export default class OpenPopup extends Plugin {
    init() {
        const editor = this.editor;
        editor.ui.componentFactory.add('openPopup', locale => {
            const view = new ButtonView(locale);
            view.set({
                label: 'Open Popup model',
                icon: popupImage,
                tooltip: true
            });

            // Callback executed once the button is clicked.
            view.on('execute', () => {
                
            });

            return view;
        });
    }
}

Popup code

import React, { useEffect, useState } from 'react';
import PropTypes from "prop-types";
import { Modal } from 'react-bootstrap';
const Popup= ({ show = false }) => {
    
    return (
            <Modal
                size="xl"
                show={show}
                dialogClassName="add-media-modal"
                onHide={()=> {show = false}}
            >
                <Modal.Header>
                    <Modal.Title id="contained-modal-title-vcenter">
                        Add Media
                    </Modal.Title>
                    <button type="button" className="btn btn-primary btn-sm" onClick={handleCloseModal}>X</button>
                </Modal.Header>
                <Modal.Body>
                      
                </Modal.Body>
                <Modal.Footer>
                   
                    <button
                        type="button" className="btn btn-primary btn-sm"
        
                    >
                        Add
                    </button>
                </Modal.Footer>
            </Modal>
    )
}

Popup.propTypes = {
    show: PropTypes.bool
};

export default Popup

I was looking for various options or solutions to the above requirement.