Невозможно получить данные YouTube в Reactjs

Question

Я использую Google API для разработки веб-приложения и получения данных с Youtube. Похоже, ошибка не произошла, но не может получить данные.

Я использую data -YouTube Data API ( Я переиздал API )

Это моя панель поиска. js

import React from 'react';

import { Paper, TextField } from '@material-ui/core';

class SearchBar extends React.Component {
  state = {
    searchTerm: '',
  }

  handleChange =(event) => this.setState ({searchTerm: event.target.value});

  handleSubmit =(event) => {
    const {searchTerm} = this.state;
    const {onFormSubmit} = this.props;


    onFormSubmit(searchTerm);

    event.preventdefault();

  }

  render(){
    return (
      // <h1>This is a serach component</h1>
      <Paper elevation={6} style={ {padding: '25px' }}>        
        <form onSubmit={this.handleSubmit}>
          <TextField fullWidth label="Search..." onChange={this.handleChange}/>
        </form>
      </Paper>
    )
  }
}

export default SearchBar;

Это мой VideoDetail. js

import React from 'react';

import { Paper, Typography } from '@material-ui/core';


const VideoDetail = ({ video }) => {
if(!video) return <div>Loading...</div>


  const videoSrc = `https://www.youtube.com/embed/${video.id.videoId}`;
  return(
   <React.Fragment>
     <Paper elevation={6} style={{height: '70%'}}>
      <iframe frameBorder="0" height="100%" width="100%" title="Video Player" src={videoSrc}/>
  <Typography variant="h4">{video.snippet.title} - {video.snippet.channelTitle}</Typography>
      <Typography variant="subtitle1">{video.snippet.channeltitle}</Typography>
      <Typography variant="subtitle2">{video.snippet.description}</Typography>

    </Paper>
     <Paper elevation={6} style={{padding: '15px'}}>

     </Paper>
   </React.Fragment>
  )
} 

export default VideoDetail;

Это мое приложение. js

import React from 'react';

import { Grid } from '@material-ui/core';

import  { SearchBar, VideoDetail, VideoList } from './components';
import youtube from './api/youtube';

class App extends React.Component {

  state = {
    video: [],
    selectedVideo: null
  }

  handleSubmit = async (searchTerm) => {
    const response = await youtube.get('search', {
      params: {
        part: 'snippet',
        maxResults: 5,
        key:'api key',
        q: searchTerm,
      }
    });
    this.setState({videos: response.date.items, selectedVideo: response.data.items[0]});
  }



  render (){
    const {selectedVideo} = this.state;
    return(
     <Grid justify="center" container spacing={10}>
       <Grid item  xs={11}>
         <Grid container spacing={10}>
          <Grid item xs={12}>      
            <SearchBar onFormSubmit={this.handleSubmit}/>
          </Grid>
          <Grid item xs={8}>
            <VideoDetail video={selectedVideo}/>
          </Grid>
          <Grid item xs={4}>
            <VideoList />
          </Grid>
         </Grid>
       </Grid>
     </Grid>
    );
  }
}
export default App;

Это мой индекс. js

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";


ReactDOM.render(<App />, document.querySelector("#root"));

введите описание изображения здесь

Это изображение, когда я ставлю ключевое слово в форме, но не работаю