Clicks On ReactJS Components Not Firing On An OpenLayers Overlay

I'm trying to create a map application. The whole UI is in React and the map is plain OpenLayers. I want to display a popover when the user clicks on some layers. He should then be able to click on it to trigger some more actions.

For creating my overlays, here is how I proceed:

• Create a div that hosts the React Component:

    var domDivElement = document.createElement('div');

    ReactDOM.render(
      <div onClick={function() { console.log('You clicked.'); }}>
        Hello World!
      </div>,
      domDivElement
    );

• Add the element to the map as an overlay

    var popover = new ol.Overlay({
      element: domDivElement,
    });

    map.addOverlay(popover);

    map.on('singleclick', function(evt) {
      popover.setPosition(evt.coordinate)
    });

The popover is properly displayed, but the You clicked. is never displayed in the console. If I render the exact same element in a plain DOM, the event is fired. What's weird is that if I do it in VanillaJS, with the onclick property of the DOM element, it fires a click.

Has anyone come upon a similar problem ?

UPDATE: Oh, and what's even weirder is that onMouseEnter and onMouseLeave events actually ARE fired on my React Component.

Right I've come across this as well. This has to do with stopEvent in ol3.

I used something like this instead:

// regular jsx onClick does not work when stopEvent is true
var closer = ReactDOM.findDOMNode(this.refs.popupCloser);
if (closer.onclick === null) {
  closer.onclick = function() {
    me._setVisible(false);
    return false;
  };
}