Interacting with the Yelp API - React Hooks Last Stage

Hello,
Following the guidance of the Interacting with the Yelp API project instructions, I decided to create it with React Hooks, rather than using traditional this.state for everything.

However, now I am in a bit of a pickle, and rather stuck!

I am looking now to move away from using the object for business, as this was used solely as sample data, created initially to preview the CSS. Now, I would like to use the Yelp API.

When entering sample data into searchYelp and running it through console.log, I receive a returned array with the data. Everything (I think), works, and I just need to move over from using static data, to using live.

Code for business that was hard-coded:

export const business = {
  imageSrc: 'https://content.codecademy.com/programs/react/ravenous/pizza.jpg',
  name: 'MarginOtto Pizzeria',
  address: '1010 Paddington Way',
  city: 'Flavortown',
  state: 'NY',
  zipCode: '10101',
  category: 'Italian',
  rating: 4.5,
  reviewCount: 90
}

How I had the business array show when it was hard-coded:
const businesses = [business, business, business, business, business, business]

How I used searchYelp to test whether the API worked:

searchYelp('Food', 'New York', 'best_match')

App.js:

import React, {useState} from 'react'

import './App.css';
import SearchBar from '../Components/Search Bar/Search Bar';
import BusinessList from '../Components/Business List/Business List';

import searchYelp from '../util/Yelp'

function App() {
  const [businesses, setBusinesses] = useState([])
  const handleSearchYelp = async (term, location, sortBy) => {
    const data = await searchYelp(term, location, sortBy)
    console.log(data)
    setBusinesses(data);
  }
  return (
    <div className="App">
      <h1>ravenous</h1>
      <SearchBar searchYelp={handleSearchYelp} />

      <BusinessList businesses={businesses} />
    </div>
  );
}

export default App;

SearchBar.js:

import React, { useState } from "react";
import "./Search Bar.css";

export default function SearchBar({searchYelp}) {
  const [term, setTerm] = useState("Food Trucks");
  const [location, setLocation] = useState("New York");
  const [sortBy, setSortBy] = useState("best_match");

  const sortByOptions = {
    "Best Match": "best_match",
    "Highest Rated": "rating",
    "Most Reviewed": "review",
  };
  const renderSortByOptions = () => {
    const objectKeys = [...Object.keys(sortByOptions)]
    const objectValues = Object.values(sortByOptions);
    const mapObjectKeys = objectKeys.map((filterOption, index) => (
      <li
        key={index}
        className={sortBy === objectValues[index] ? "active" : ""}
        onClick={() => {
          setSortBy(objectValues[index]);
        }}
      >
        {filterOption}
      </li>
    ));
    return mapObjectKeys;
  };
  function handleSubmit(e) {
    e.preventDefault()
  }
  return (
    <div className="SearchBar">
      <div className="SearchBar-sort-options">
        <ul>{renderSortByOptions()}</ul>
      </div>
      <form onSubmit={handleSubmit}>
        <div className="SearchBar-fields">
          <input
            onChange={({ target }) => {
              setTerm(target.value);
            }}
            placeholder="Search Businesses"
          />
          <input
            onChange={({ target }) => {
              setLocation(target.value);
            }}
            placeholder="Where?"
          />
        </div>
        <div className="SearchBar-submit">
          <button
          type='button'
          onClick={() => {
            searchYelp(term, location, sortBy)
          }}
          >Let's Go</button>
        </div>
      </form>
    </div>

  );

}

SearchYelp.js:

const apiKey =  "TOP SECRET";
const corsAnywhere = "https://cors-anywhere.herokuapp.com/";
export default async function searchYelp(term, location, sortBy) {

  const url = `https://api.yelp.com/v3/businesses/search?term=${term}&location=${location}&sort_by=${sortBy}`;

  const data = await fetch(`${corsAnywhere}${url}`, {
    headers: {
      Authorization: `Bearer ${apiKey}`,
    },
  });

  const response = await data.json();

  if (response) {
    const businesses = response.businesses.map((business) => {
      return {
        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,
        rating: business.rating,
        reviewCount: business.review_count
      }
    })

    return businesses
  } else {
    throw new Error("Request failed!");
  }
}

Business.js:

import React from 'react';
import './Business.css';
import { business } from '../../App/App';

export default function Business() {
    const { imageSrc, name, address, city, state, zipCode, category, rating, reviewCount } = business
    return (
        <div className="Business">
            <div className="image-container">
                <img src={imageSrc} alt='' />
            </div>

            <h2>{name}</h2>
            <div className="Business-information">
                <div className="Business-address">
                    <p>{address}</p>
                    <p>{city}</p>
                    <p>{zipCode} {state}</p>
                </div>

                <div className="Business-reviews">
                    <h3>{category}</h3>
                    <h3 className="rating">{rating} stars</h3>
                    <p>{reviewCount} reviews</p>
                </div>
            </div>
        </div>
    )
}

Business List.js

import React from 'react';
import './Business List.css'
import Business from '../Business/Business'

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