Creé un componente de recuperación personalizado y simplemente estoy tratando de obtener una imagen para cargar en la página desde una API llamada "la API del perro". ¿Me he perdido algo crucial?

Aplicación.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 (gancho para obtener los datos)

 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;

URL de API de la que intento recuperar datos: https://api.thedogapi.com/v1/images/search/