React events not working inside Polymer

Question

I'm trying to bundle a mini react app inside a Polymer3 Component. Most things seem to work so far except for React events not firing.

Polymer component

import {LitElement, html} from '@polymer/lit-element';
import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from '../../components/TodoList/TodoList.component';

import './todo-list.scss';

class TodoListComponent extends LitElement {

static get properties() {
    return {name: String}
};

onClick = (e) => {
    console.log("Clicked Polymer button"); //works
    alert("Clicked!");
};

_render({name}) {
    const mountPoint = document.createElement('div');
    this.shadowRoot.appendChild(mountPoint);
    ReactDOM.render(
        <TodoList name={name} clicked={this.onClick} />,
        mountPoint
    );
    return html`
        <style>

        </style>
        <div class="app">
        <button class="parent-button" on-click="${this.onClick}">Polymer Button</button>
          ${mountPoint}
        </div>
    `;
  }
}

window.customElements.define('todo-list', TodoListComponent);

React Component

import React from 'react';

class TodoList extends React.Component {

componentDidMount() {
    const btn = document.querySelector('button');
    btn.addEventListener('click', this.props.clicked);
     // btn.click(); //this works but not usefull
}

onClick = (e) => {
    console.log('ClickedReact button'); //not working when you click button :(
};

render() {
    return (
        <div className="sub-app">
            <h3>
                React Zone:
            </h3>
            <button onClick={this.onClick}>React button</button>
        </div>
    )
  }

}

export default TodoList;

It seems React has its own way of doing events i.e 'synthetic events' which might not work at all inside shadow dom? What am i missing to make this work