【React】外部API(JSON)を取得して表示する方法

import React from 'react';
  import ReactDOM from 'react-dom/client';
  import './index.css';
  import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
  <App />
  </React.StrictMode>
  );

import { useEffect, useState } from "react";
  import "./App.css";
  import Card from "./components/Card/Card";
  import { getPokemon } from "./utils/get";

  function App() {
    // pokeAPI
    const initialURL = "https://pokeapi.co/api/v2/pokemon"; //endpoint
    const [loading, setLoading] = useState(true); //最初にloading出したいのでtrue
    const [pokemonData, setPokemonData] = useState([]);


    useEffect(() => {
      const fetchPokemonData = async () => {
        // すべてのポケモンデータを取得
        let res = await getPokemon(initialURL);
        // 詳細データを取得
        loadPokemon(res.results);
        setLoading(false);
      };
      fetchPokemonData();
    }, []);

    const loadPokemon = async (data) => {
      let _pokemonData = await Promise.all(
        // Promise.all(配列)、全部とってくるまで待つ
        data.map((pokemon) => {
          let pokemonRecord = getPokemon(pokemon.url);
          return pokemonRecord;
        })
      );
      setPokemonData(_pokemonData);
    };
    // console.log(pokemonData); //もしコンソールの結果がPromise {<pending>}というものなら、async-awaitつけ忘れ

    return (
      <>
        <Navbar />
        <div className="App">
          {loading ? (
            <p className="loader">ロード中。。。</p>
          ) : (
            <div>
              {pokemonData.map((pokemon, i) => {
                return <Card key={i} pokemon={pokemon} />;
              })}
            </div>
          )}
        </div>
      </>
    );
  }

  export default App;

export const getPokemon = (url) => {
  return new Promise((resolve, reject) => {
    fetch(url)
      .then((res) => res.json())
      .then((data) => resolve(data));
  });
};

import React from "react";
  import "./Card.css";

  const Card = ({ pokemon }) => {
    return (
      <div className="card">
        <div>
          <img src={pokemon.sprites.front_default} alt={pokemon.name} />
          <h3>{pokemon.name}</h3>
          <div>
            <ul>
              <li>
                タイプ:
                {pokemon.types.map(type => {
                  return (
                    <div key={type.type.name}>
                      <span className="typeName">{type.type.name}</span>
                    </div>
                  )
                })}
              </li>
              <li className="title">能力: {pokemon.abilities[0].ability.name}</li>
              <li className="title">重さ: {pokemon.weight}</li>
              <li className="title">高さ: {pokemon.height}</li>
            </ul>
          </div>
        </div>
      </div>
    );
  };

  export default Card;