Event Handler Inside Motion Tag Is Getting Ignored

Hi, everyone!
I'm trying to re-create a sliding menu using React Motion. You can see my non-working example here: http://codepen.io/kirupa/pen/BQVzvQ (click on the blue circle to display the menu or to hide it)

Here is my problem. The menu should disappear when you click anywhere inside of the yellow region. A working non-ReactMotion example is here: https://www.kirupa.com/html5/examples/slidingmenu.htm

Getting back to React. For whatever reason, my event handler attached to the menu element inside the Motion tag is getting ignored. The relevant snippet looks as follows:

{
function({x}) {
return (

Notice the onMouseDown={this.handleMouseDown}. This is the same event attached to the blue circle that displays (and hides) the menu when you click, and that works fine.

What am I doing wrong here? This seems like I'm doing something obviously wrong, but I can't quite figure out what it is.

Thanks,
Kirupa