How do I target each image seperately, and fetch API data from them, instead of collect it all at once

Question

I've created an app that connects to an API that retrieves dog images. On page load, 12 images are displayed, along with json text, that provides information about the breeds; height of the dog etc.

My final step would be somehow connecting the a button (which already exists) to each individual image, then retrieving data for that one specific dog/image after clicking it, instead of the API fetching all of the data at once on initial page load.

App.js

import './App.css';
import './Dog.js';
import './index.css';
import FetchAPI from './FetchAPI';




function DogApp() {

  return (
    
    <div className="dogApp">
     <FetchAPI />   
    </div>
  );
}

export default DogApp;

FetchAPI.js

import React, { useState, useEffect } from 'react'


const FetchAPI = () => {

    const [data, setData] = useState([]);
    const apiGet = () => {
        const API_KEY = "";
        fetch(`https://api.thedogapi.com/v1/images/search?limit=12&page=10&order=Desc?API_KEY=${API_KEY}`)
            .then((response) => response.json())
            .then((json) => {
                console.log(json);
                //setData([...data,json]); if json is single object
                setData([...data, ...json]); // if json is array of one object then use this line
            });
    };

    useEffect(() => {           //call data when pagee refreshes/initially loads 
        apiGet();
    }, []);

    return (
        <div>
            {data.map((item) => (
                <div class="dog">
                    <img src={item.url}></img>
                    <button onClick={item.breeds}>Fetch API</button>
                </div>
            ))}
            {data.map((item) => (
                <p>{JSON.stringify(item.breeds)}</p>
            ))}


            {/*<pre>{JSON.stringify(data, null, 2)}</pre> */}
            <br />


        </div>

    )
}

export default FetchAPI;