Tratando de obtener una imagen a la vez

He creado una función para crear una imagen de un oso, pero solo quiero una imagen a la vez. Hay un botón que está restableciendo la otra API que tengo, pero no esta. ¿Alguna ayuda o sugerencia?

const numImagesAvailable = 145 //cuántas fotos hay en total en la colección
const numItemsToGenerate = 1; //cuántas fotos quieres mostrar
const imageWidth = 360; //ancho de la imagen en píxeles
const imageHeight = 360; //alto de la imagen en píxeles
const collectionID = 9396519 //Osos, el ID de la colección de la URL original
const galleryContainer = document.querySelector('#gallery-item')

function renderGalleryItem(randomNumber) {
  fetch(`https://source.unsplash.com/collection/${collectionID}/${imageWidth}x${imageHeight}/?sig=${randomNumber}`).then(function(response) {
    console.log(response)
    let galleryItem = document.createElement('img');
    galleryItem.className = "center-bear";
    galleryItem.setAttribute("src", `${response.url}`)
    document.body.append(galleryItem)
  })
}

for (let i = 0; i < numItemsToGenerate; i++) {

}

buttonEl.addEventListener("click", function(event) {
  event.preventDefault();
  listItemEl.remove();
  callapi();
  let randomImageIndex = Math.floor(Math.random() * numImagesAvailable);
  renderGalleryItem(randomImageIndex);
});

<div id="gallery-item"></div>