Ravenous part 4 - 400 Bad Request

Exercise link: https://www.codecademy.com/paths/build-web-apps-with-react/tracks/bwa-ajax-requests-and-api-interactions/modules/bwa-ravenous-part-four/projects/interacting-with-yelp-api

It seems that I’ve completed Ravenous project, but I can’t get data from Yelp. When I click ‘Let’s go’, there’s an error in the console: 400 (Bad Request)

Here’s my code:

App.jsx:

import { useState } from 'react';
import '../css/styles';
import BusinessList from './BusinessList';
import SearchBar from './SearchBar';
const apiKey = '(here's my api key)';


export default function App() {



  const [businesses, setBusinesses] = useState([]);


  function searchYelp(term, location, sortBy) {
    return fetch(
        `https://cors-anywhere.herokuapp.com/https://api.yelp.com/v3/businesses/search?term=${term}&location=${location}&sort_by=${sortBy}`, 
        {headers: {Authorization: `Bearer ${apiKey}`}
    }).then(setBusinesses([])) 
        .then(response => {
            return response.json();
        }).then(jsonResponse => {
            if (jsonResponse.businesses) {
                return jsonResponse.businesses.map(business => {
                    console.log(business)
                    return setBusinesses(el => [...el, {
                        id: business.id,
                        imageSrc: business.image_url,
                        name: business.name,
                        address: business.location.address1,
                        city: business.location.city,
                        state: business.location.state,
                        zipCode: business.location.zip_code,
                        category: business.categories[0].title,
                        rating: business.rating,
                        reviewCount: business.review_count
                    }])
                })
            }
        })
    } 


  return (
    <div className="App">
      <h1 className='title'>ravenous</h1>
      <SearchBar searchYelp={searchYelp}/>
      <BusinessList businesses={businesses}/>
    </div>
  );
}


Here’s the rest of the code:

Business.jsx:

import React from 'react';

export default function Business(props) {

    return (
        <div className="business">
            <div className="business__img">
                <img src={props.business.imageSrc} alt=''/>
            </div>
            <h2 className='business__name'>{props.business.name}</h2>
            <div className="business__info">
                <div className="business__info__address">
                    <p>{props.business.name}</p>
                    <p>{props.business.address}</p>
                    <p>{props.business.state} {props.business.zipCode}</p>
                </div>
                <div className="business__info__reviews">
                    <h3>{props.business.category}</h3>
                    <h3 className='business__info__reviews__rating'>{props.business.rating}</h3>
                    <p>{props.business.reviewCount}</p>
                </div>
            </div>
        </div>
    )
}

BusinessList.jsx:

import React from "react";
import Business from "./Business";


export default function BusinessList(props) {
    return (
        <div className="businessList">
            {props.businesses.map(business => {
                return <Business business={business} key={business.id}/>
            })}
        </div>

    )
} 

Business.jsx:

import React from 'react';

export default function Business(props) {

    return (
        <div className="business">
            <div className="business__img">
                <img src={props.business.imageSrc} alt=''/>
            </div>
            <h2 className='business__name'>{props.business.name}</h2>
            <div className="business__info">
                <div className="business__info__address">
                    <p>{props.business.name}</p>
                    <p>{props.business.address}</p>
                    <p>{props.business.state} {props.business.zipCode}</p>
                </div>
                <div className="business__info__reviews">
                    <h3>{props.business.category}</h3>
                    <h3 className='business__info__reviews__rating'>{props.business.rating}</h3>
                    <p>{props.business.reviewCount}</p>
                </div>
            </div>
        </div>
    )
}