Competitions for a sport rendered with Cloudbet Market Helper package

cloudbet_market_helper_competitions_list.js

//App.js
import "./styles.css";
import React from "react";
import { Locale, getSportsName } from "@cloudbet/market-helper";
function getSport(sport) {
  return fetch(`https://sports-api.cloudbet.com/pub/v2/odds/sports/${sport}`, {
    headers: {
      "X-Api-Key": "",
      "cache-control": "max-age=600"
    }
  });
}
const sports = ["soccer", "basketball", "american-football"];
export default function App() {
  const [sport, setSport] = React.useState(sports[0]);
  const [loading, setLoading] = React.useState(false);
  const [competitions, setCompetitions] = React.useState([]);
  React.useEffect(() => {
    if (!sport) {
      return;
    }
    setLoading(true);
    getSport(sport)
      .then((response) => {
        setLoading(false);
        return response.json();
      })
      .then((body) => {
        setCompetitions(body.categories.flatMap((c) => c.competitions));
      });
  }, [sport]);
  return (
    <div className="App">
      <div>
        <label for="sport">Sport</label>
        <select value={sport} onChange={(e) => setSport(e.target.value)}>
          {sports.map((s) => (
            <option value={s}>{getSportsName(s, Locale.ko)}</option>
          ))}
        </select>
      </div>
      {loading ? <Loading /> : competitions.map((c) => <div>{c.name}</div>)}
    </div>
  );
}

function Loading() {
  return Loading...;
}