Как передать функцию / обработчик события в веб-компонент из React

Question

Я новичок в веб-компонентах и ​​пытаюсь интегрировать веб-компоненты с React.

Есть сценарий, в котором мне нужно перейти от кнопки реагировать на веб-компонент.Для события click кнопки я прикрепил обработчик, который будет выполнять некоторые действия / манипуляции в реакции.Таким образом, он должен быть передан от реакции на веб-компонент.

Ниже приведен пример кода:

Реагирующий компонент:

import React, {Component} from 'react';

export class Sample extends Component {

    handleButtonOneClick = () => {
        alert(" ButtonOne Action happened, perform some action in React!!!!!!!!!!!");
    };
    handleButtonTwoClick = () => {
        alert("ButtonTwo Action happened, perform some action in React!!!!!!!!!!!");
    };

    render() {
        return (
                <my-sample-element >
                    <button id="button-one" onClick={this.handleButtonOneClick}> Button 1</button>
                    <button id="button-two" onClick={this.handleButtonTwoClick}> Button 2</button>
                </my-sample-element>
        );
    }
}

Веб-компонент:

export class CustomSampleElement extends HTMLElement {

    constructor() {
        super();
    }

    connectedCallback() {
        const shadowDOM = this.attachShadow({mode: 'open'});
        const divElement = document.createElement('div');

        const childrenNode = this.children;
        while (childrenNode.length) {
            divElement.appendChild(childrenNode[0]);
        }

        shadowDOM.appendChild(divElement);
    }
}

customElements.define('my-sample-element', CustomSampleElement);

Но обработчик событий не добавляется в веб-компонент.Я не знаю почему.Есть идеи, как решить эту проблему?