api로 호출한 이미지가 뜨지 않습니다

고양이 사진을 랜덤으로 바꿔주는 기능을 만들고 있습니다.

const fetchCat = async()=>{
const OPEN_API_DOMAIN = "https://cataas.com"
const response = await fetch (`${OPEN_API_DOMAIN}/cat?json=true`)
const responseJson = await response.json();
return `${OPEN_API_DOMAIN}/${responseJson.url}`;
}

function CatImage(){

const initImage = "https://cataas.com/cat/pbrosoqOlUUtR5XJ"
const [CatImage,setCatImage]= React.useState(initImage);
const handleChangeCat = async()=>{
const newImage = await fetchCat();
setCatImage(newImage);
}
return(
<div>
< img src={CatImage} alt="" style={{width: "300px"}}/>
<button onClick={handleChangeCat}>cat</button>
</div>
)
}

위와 같이 작성했는데 화면 속 고양이 사진이 바뀌지 않고 콘솔에 아래와 같은 오류가 나옵니다. cat?json=true가 잘못되었을까요?


GET https://cataas.com/undefined 404 (Not Found)