Tengo un problema en el que no se puede ver ninguna de mis imágenes, solo un cuadro. tengo 4 imágenes que quiero intercambiar cada 2 segundos

 <picture> <img src="" alt="" class="main-hobby"> <div> <img class="image1" src="./Assets/slider-1.png" alt="person-learning-new-technology"> <img class="image2" src="./Assets/slider-2.png" alt="a-house"> <img class="image3" src="./Assets/slider-3.png" alt="person-playing-golf"> <img class="image4" src="./Assets/slider-4.png" alt="xbox-controller"> </div> </picture>

Aquí está mi javascript, soy nuevo en esto, así que no estoy seguro de lo que está pasando.

 const image1 = document.querySelector('.image1') const image2 = document.querySelector('.image2') const image3 = document.querySelector('.image3') const image4 = document.querySelector('.image4') const images = [image1, image2, image3, image4]; let index = 0; const mainHobby = document.querySelector('.main-hobby'); console.log(images); function change() { mainHobby.src = images[index] index > 2 ? index = 0 : index ++; ; } window.onload = function () { setInterval (change, 2000); }

y css si es necesario

 .main-hobby { display: block; width: 70px; height: 70px; margin-bottom: 20%; }

Gracias por cualquier ayuda que usted puede dar