Why does the popup happen when using mouseenter/mouseleave?

Question

JavaScript

For the sake of example, I wrote mouseenter / mouseleave handlers in react and to my surprise, e.target turns out to be child elements.
For the sake of interest, I created an example on the native, and everything works fine there only on the parent.
Component code
and 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>
     );
 }