Почему происходит всплытие при использовании mouseenter/mouseleave?

Question

[Fierfoxik]

Написал ради примера обработчики mouseenter/mouseleave в react и к моему удивлению e.target оказывается дочерними элементами.
Создал ради интереса пример на нативе, и там все прекрасно отрабатывает только на родителе.

Код компонента
и codepen

class MovieItem extends Component {
    constructor(props) {
        super(props);
        this.state = {
            popup: false
        };
    }

 outItem = (e) => {
    	e.stopPropagation()
    	console.log(e.target)

	 e.target.style.opacity = 0
     // this.setState({
     //     popup: true
     // });

 };

 leaveItem = (e) => {
 	e.stopPropagation()
		 console.log(e.target)
		 e.target.style.opacity = 1
	     this.setState({
	         popup: false
	     });

 };


 render() {
     return (
         <div className="movie-item" id={this.props.id} onMouseEnter={(e)=> this.outItem(e)} onMouseLeave={(e)=> this.leaveItem(e)}>
             {this.state.popup ? <MovieInfo title={this.props.title}/> : null}
             <div className="movie-item__data">
                 <Link to={'/movie/' + friendlyUrl(this.props.original_title)}>
                     <div className="movie-item__poster">
                         <img src={'https://image.tmdb.org/t/p/w370_and_h556_bestv2' + this.props.poster} alt=""/>
                     </div>
                     <div className="movie-item__title">{this.props.title}</div>
                 </Link>
             </div>
         </div>
     );
 }