Обработка ошибок в React

Делаю список фильмов со сторонним API. Пытаюсь обработать ошибку через блок .catch в ComponentDidMount(), передавая туда функцию onError, но почему-то правильный Alert не выводится на страницу, в чем может быть проблема? Также, для информации, использую сторонние библиотеки для отрисовки лоадера и вывода ошибки (antd).

import React from "react";
import "./MovieItem.css";
import { format } from "date-fns";
import SpinAntItem from "../SpinAntItem";
import ErrorAntItem from "../ErrorAntItem";

export default class MovieItem extends React.Component {

  state = {
    movies: [],
    loading: true,
    error: false,
  };

  async componentDidMount() {
    await fetch('https://api.themoviedb.org/3/search/movie?api_key=fe376611c70e9694e174f7ee3afdb680&quer=return')
          .then(response => response.json())
          .then(res => this.setState({ movies: res.results, loading: false }))
          .catch(this.onError)
  }

  onError = () => {
    this.setState({
      error: true,
      loading: false,
    })
  }

  shortText(movieOverview, maxLength, postfix) {
    const pos = movieOverview.indexOf(' ', maxLength);
    return (pos === -1 ? movieOverview : movieOverview.substring(0, pos) + postfix);
  }

  dateFormatted(releaseDate) {
    const date = new Date(releaseDate)
    return format(date, "MMMM dd, yyyy")
  }

  createElement(movie) {
    const {
      id,
      poster_path,
      original_title,
      release_date,
      genre_ids,
      overview,
    } = movie;

    return (
      <li className="movie-item" key={id}>
        <div className="movie-item-image">
          <img src={`https://image.tmdb.org/t/p/original${poster_path}`} alt="Poster"></img>
        </div>
        <div className="movie-item-description">
          <p className="movie-item-title">{original_title}</p>
          <p className="movie-item-date">{this.dateFormatted(release_date)}</p>
          <div className="movie-item-category">
            <div className="category-item">{genre_ids}</div>
          </div>
          <p className="movie-item-text">{this.shortText(overview, 240, '...')}</p>
        </div>
      </li>
    );
  }

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

    const hasData = !(loading || error);
    const errorMessage = error || movies.length === 0 ? <ErrorAntItem /> : null;
    const loadingMessage = loading ? <SpinAntItem /> : null;
    const content = hasData ? movies.map(movie => this.createElement(movie)) : null;

    return (
      <ul className="movies-list">
        {errorMessage}
        {loadingMessage}
        {content}
      </ul>
    );
  }
}