react16 onmouseenter bug

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.production.min.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

Babel + JSX

class Demo extends React.Component {
    constructor(prop) {
        super(prop);
        this.enter = this.enter.bind(this)
        this.state = {
            flag: false
        }
    }
    enter(event) {
        console.log(event.nativeEvent);
        console.log("enter")
    }
    click() {
        this.setState({flag:!this.state.flag})
    }
    render() {
        let old = {
            height: "100px",
            width: "100px",
            border: "1px solid #6dbbff"
        };
        let aa = {
            height: "100px",
            width: "100px",
            border: "1px solid red"
        };
        let content = {
            border: "1px solid black",
            display: "flex",
            padding:"10px"
        }
        return(
            <div>
                <div style={content} onMouseEnter={this.enter}>
                    {this.state.a}
                    <div style={old}>old</div>
                    <div style={aa}>old</div>
                    {this.state.flag && <div style={aa}>new</div>}
                </div>
                <button onClick={this.click.bind(this)}>（click me）</button>
            </div>
        )
    }
}


ReactDOM.render(
  <Demo />,
  document.getElementById('container')
);