App.js

import "./styles.css";
import { usePokemon } from "./hook";
export default function App() {
  let pokemons = usePokemon();
  return (
    <div>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <table>
        <tr>
          <th>ID</th>
          <th>Sprite</th>
          <th>Name</th>
        </tr>

        {pokemons.map((el) => (
          <tr>
            <td>{el.id}</td>
            <td>
              <img src={el.sprite} alt={el.name} />
            </td>
            <td>{el.name}</td>
          </tr>
        ))}
      </table>
    </div>
  );
}

hook.jsx

import { useState, useEffect } from "react";
import Axios from "axios";

export const usePokemon = () => {
  let [pokemons, setPokemons] = useState([]);

  const fetchPokemons = async () => {
    try {
      let { data } = await Axios({
        url: "https://klifu.deta.dev/pokemons",
        method: "GET"
      });
      setPokemons(data);
    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
    fetchPokemons();
  });

  return pokemons;
};