Почему React начал выводить ошибку Cannot read property 'map' of undefined?

Question

evg34rozenber @evg34rozenber

React

Почему React начал выводить ошибку Cannot read property 'map' of undefined?

Захотел сделать приложение "фильмы". Нашел бесплатный api, вот он https://yts.mx/api/v2/list_movies.json
В компоненте хотел вывести жанры фильма. Для этого использовал map, сначала все прекрасно работало, React вообще не ругался. Но запустив сегодня код, то увидел, что он перестал работать.
вот код компонента

import React from 'react';
import "./MovieItem.css"

export default function MovieItem({id, title, genres, year, summary, poster}) {
    console.log(genres);
    return(
        <div className="movie__item">
            <img src={poster} className="movie__img" alt={title} title={title}/> 
            <div className="movie__column">
                <h3 className="movie__title">{title}</h3>
                <h5 className="movie__year">Год выхода: {year}</h5>
                <ul className="movie__genres">
                    {genres.map((el, index) => {
                        return <li key={index} className="movie__genres-item">{el}</li>
                    })}
                </ul>
                <p className="movie__summary">Описание: <br/>{summary.slice(0, 150)}...</p>
            </div>
        </div>
        
    );
}

Вот как получал get запрос

import React, { Component } from 'react';
import Movies from "./components/Movies/Movies";
import axios from "axios";
import "./App.css";


export default class App extends Component {

  state = {
    isLoading: true,
    movies: []
  }

  getMovies = async () => {
    const {data: {data: {movies}}} = await axios.get('https://yts.mx/api/v2/list_movies.json');
    this.setState({
      movies: movies,
      isLoading: false
    })
  }

  componentDidMount() {
    this.getMovies();
  }

  render() {
    const {isLoading, movies} = this.state;

    return (
      <section className="container">
          {isLoading ? 
          <div className="loader">
            <span>Загрузка...</span>
          </div>
          : <Movies movies={movies}/>
          } 
      </section>
    );
  }
}

А вот код компонента movie, где выводятся карточки со всеми фильмами

import React from 'react';
import MovieItem from "../MovieItem/MovieItem";
import "./Movies.css";

export default function Movies({movies}) {
    console.log(movies);
    return(

        <div className="movie">
            {movies.map(el => {
               return(
                <MovieItem 
                key={el.id} 
                id={el.id} 
                title={el.title} 
                genres={el.genres}
                year={el.year} 
                summary={el.summary} 
                poster={el.medium_cover_image}
                />
               )
            })}
        </div>
    );
}

По какой причине мой код перестал работать? И как исправить?