Reactjs UI library throws error addComponentAsRefTo(...) on client side

Question

Could anyone figure out why reactjs fails to attach listeners to Grommet UI components on the client side? I have the components rendered on the server side first:

import React from 'react';
import Tabs from 'grommet/components/Tabs';
import Tab from 'grommet/components/Tab';

export default class ItemPage extends React.Component {
    render(){
        return <div id="app">
            <div onClick={this.clickHandler}>Something@@@@@@@</div>
            <Tabs>
                <Tab title="First Title">
                    <h3>First Tab</h3>
                    <p>Contents of the first tab !</p>
                </Tab>
                <Tab title="Second Title">
                    <h3>Second Tab</h3>
                    <p>Contents of the second tab</p>
                </Tab>
                <Tab title="Third Title">
                    <h3>Third Tab</h3>
                    <p>Contents of the third tab</p>
                </Tab>
            </Tabs>
            </div>
    }
    clickHandler(){
        console.log("here!!!!!");
    }
}

module.exports = ItemPage;

It is rendered fine. On the client side, I have ReachDOM.render to bind the events back to the react DOM:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-dom.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

<script type="text/javascript" src="/js/build/ItemPage.js"></script>    
<script>
    var container = document.getElementById("app");
    var component = ItemPage;
    ReactDOM.render(React.createElement(component),container);
</script>

The click function on that first div tag Something@@@@@@ works, however, the <Tabs> doesn't work at all. The click functions on every <Tab> never trigger and there are no styles applied, just plain html:

And there is this error:

addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded 

Some says that's because React module was loaded twice, I suspect it's due to the Grommet UI library because the error is gone after removing all of the <Tabs> components. Can anyone tell me how to solve the problem?

Some other references:

npm ls | grep react
├─┬ babel-preset-react@6.11.1
│ ├── babel-plugin-transform-react-display-name@6.8.0
│ ├─┬ babel-plugin-transform-react-jsx@6.8.0
│ │ └── babel-helper-builder-react-jsx@6.9.0
│ ├── babel-plugin-transform-react-jsx-self@6.11.0
│ └── babel-plugin-transform-react-jsx-source@6.9.0
│ ├─┬ react@15.2.1
│ ├── react-dom@15.2.1
│ ├─┬ react-gravatar@2.4.4
│ ├─┬ react-intl@2.1.3
├── react@0.14.8 extraneous
├── react-dom@0.14.8 extraneous
├── react-hot-loader@1.3.0 extraneous
├─┬ react-redux@4.4.5
│ ├── hoist-non-react-statics@1.2.0




  "devDependencies": {
    "babel-cli": "^6.10.1",
    "babel-core": "^6.10.4",
    "babel-loader": "^6.2.4",
    "babel-minify": "^0.1.12",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-member-expression-literals": "^6.8.0",
    "babel-plugin-transform-merge-sibling-variables": "^6.8.0",
    "babel-plugin-transform-minify-booleans": "^6.8.0",
    "babel-plugin-transform-property-literals": "^6.8.0",
    "babel-plugin-transform-simplify-comparison-operators": "^6.8.0",
    "babel-polyfill": "^6.9.1",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.0.15",
    "babel-preset-stage-0": "^6.0.15",
    "babelify": "^7.3.0",
    "bluebird": "*",
    "body-parser": "1.10.0",
    .......
  },
  "dependencies": {
    "browserify": "^13.0.1",
    "connect-redis": "^3.1.0",
    "express-session": "^1.14.0",
    "grommet": "^0.6.9",
    "node-uuid": "^1.4.7",
    "react-redux": "^4.4.5",
    "redux": "^3.5.2",
    "request": "^2.53.0",
    "webpack-merge": "^0.14.0"
  }