我创建了一个自定义获取组件，我只是想通过名为“the dog API”的 API 获取要加载到页面上的图像。我是否遗漏了某些关键内容？

App.js

import './App.css';
import './Dog.js';
import useFetch from './useFetch';


function DogApp() {

  const API_KEY = "";
  const { data, loading, error } = useFetch(`https://api.thedogapi.com/v1/images/search/API_KEY=${API_KEY}`);


  if (loading) return <h1>Loading the dogs!</h1>

  if (error)console.log(error);

  return (
    <div className="DogApp">
      <img src={data?.url}></img>
    </div>
  );
}

export default DogApp;

UseFetch.js（用于获取数据的钩子）

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

function useFetch(url) {

    const [data, setData] = useState(null);    //initialize as null depending on what data is
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState(null);

    useEffect(() => {
        setLoading(true);
        axios                      //make request, if successful it sets data, if not, seterror state
            .get(url)
            .then((response) => {
                setData(response.data);
            }).catch((err) => {
                setError(err)

            }).finally(() => {
                setLoading(false);

            });
    }, [url]);

    return {data, loading, error}; 

}

export default useFetch;

我尝试从以下 API URL 检索数据： https://api.thedogapi.com/v1/images/search/