How to fetch images from object endpoint

I have below code that fetch image from API but how to fetch images from this url https://collectionapi.metmuseum.org/public/collection/v1/objects/[putting object endpoint e.g 400] by using object endpoints. if the objectsId doesb't have primaryImage in the JSON file jump and check another end point

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

function DataFetching() {
    const url = 'https://collectionapi.metmuseum.org/public/collection/v1/objects/400'
    const [product, setProduct] = useState(null)

    let content = null
    
    useEffect(() => {
        axios.get(url)
        .then(response => {
            setProduct(response.data)
        })
    }, [url])

    if(product){
       content = 
       <div>
            <h2 className="text-2xl font-bold mb-3">
                {product.department}
            </h2>


            <div>
            <img className="image" src={product.primaryImage} alt={product.department}/>
            </div>
        </div>

    }
    return (
        <div>
           {content}
        </div>
    )
}

export default DataFetching;