React子组件回调经两次传递后未执行问题求助

我正在学习Udemy的React-Redux课程第11节的视频应用项目，按照讲师的实现方式，将App组件中的onVideoSelect回调逐层传递给VideoList、VideoItem组件，点击VideoItem时本应触发控制台打印，但浏览器无输出，已核对代码拼写无误。

相关代码如下：

App.js #

import React from 'react';

import youtube from '../apis/youtube';
import SearchBar from './SearchBar';
import VideoList from './VideoList';

class App extends React.Component {

  state = {videos: [], selectedVideo: null};

  onTermSubmit = async term => {
    const response = await youtube.get('/search', {
      params: {
        q: term
      }
    });

    // console.log(response.data.items);

    this.setState({videos: response.data.items});
  };

  onVideoSelect = video => {
    console.log('from the app', video);
  }

  render() {
    return (
      <div className="ui container">
        <SearchBar onFormSubmit={this.onTermSubmit} />
        <VideoList
          onVideoSelect={this.onVideoSelect}
          videos={this.state.videos} />
      </div>
    )
  }
}

export default App;

VideoList.js #

import React from 'react';
import VideoItem from './VideoItem';

const VideoList = ({videos, onVideoSelect}) => {
  const rendered_list = videos.map(video => {
    return <VideoItem onVideoSelect={onVideoSelect} video={video} />
  });

  return <div className="ui relaxed divided list">{rendered_list}</div>;
};

export default VideoList;

VideoItem.js #

import React from 'react';

import './VideoItem.css';

const VideoItem = ({video, onVideoSelect}) => {
  return (
    <div onClick={() => onVideoSelect(video)} className="item video-item">
      <img
        src={video.snippet.thumbnails.medium.url}
        className="ui image"
      />
      <div className="content">
        <div className="header">{video.snippet.title}</div>
      </div>
    </div>
  );
}

export default VideoItem;

未执行的代码为：

onVideoSelect = video => {
    console.log('from the app', video);
}

内容的提问来源于stack exchange，提问作者codyc4321