onClick, onSubmit event not working in custom magnific popup component in reactjs

Question

In the magnific popup I have added a button with add to cart feature, whenever I attach onClick event from reactjs it doesn't trigger, but it does with jquery document click event but that is not good and also doesn't fetch for form data properly.

class Modal extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: true,
            product_id: this.props.product_id
        }
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    componentDidMount() {
        let that = this;
        $.magnificPopup.open({
            items: {
                src: '#modal-dialog'
            },
            type: 'inline',
            fixedContentPos: true,
            fixedBgPos: true,
            overflowY: 'auto',
            closeBtnInside: true,
            preloader: false,
            midClick: true,
            removalDelay: 300,
            closeMarkup: '<button title="%title%" type="button" class="mfp-close"></button>',
            mainClass: 'my-mfp-zoom-in',
            callbacks: {
                close: function() {
                    // that.closePopup();
                    that.props.closePopup();
                },
                open: function() {
                    $(document).on('click', '#addToCart', function() {
                        // This works but form data is empty
                        /*
                        let id = $(this).data('id');
                        that.handleSubmit(id);
                        */
                    });
                }
            }
        });
    }


    handleSubmit(id) {
        let form = document.getElementById('product_' + id);
        let formData = new FormData(form);
        console.log(formData);
    }

    render() {
        return (
            <div id="modal-dialog" className="zoom-anim-dialog mfp-hide">
                <form name="form" id={'product_' + this.state.product_id}>
                    <div className="small-dialog-header">
                        <h3>{this.state.title}</h3>
                    </div>
                    <div className="content">
                        ...
                    </div>
                    <div className="footer">
                        <div className="row small-gutters">
                            <div className="col-md-12">
                                <input onClick={() => this.handleSubmit(this.state.product_id)} data-id={this.state.product_id} id="addToCart" type="button" value="Add to cart" />
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        )
    }
}

Is there a way to attach reactjs event in magnificpopup open event?