How to use stencil component in react.js?

I am having stencil web components for button, Im trying to use in react its click event is not working, but its working fine in angular. I have found many solution which used addEventListner but its not possible when I use dynamically. Please help me with solution other than addEventListner.

stencil component

import { Component, Prop, Event, EventEmitter } from '@stencil/core';

@Component({
    tag: 'stencil-button',
    styleUrl: 'style.scss',
    shadow: true
})

export class StencilButton {
    @Prop() label: string;
    @Prop() primary: boolean;
    @Prop() secondary: boolean;
    @Prop() transparent: boolean;

    @Event() handleSubmit: EventEmitter;

    onSubmit() {
        this.handleSubmit.emit();
    }

    render() {
        return <button class={{ 'stencil-button': true,'stencil-button--primary': this.primary, 'stencil-button--secondary': this.secondary, 'stencil-button--transparent': this.transparent,  }}  onClick={() => this.onSubmit()}>{this.label}</button>
    }
}

React

<stencil-button handle-submit={() => { buttonClick() }} primary label='Submit'></stencil-button

here execpt click rest is working