How to display an random items from an array?

[![

var items    = ['imgs/garbagebag.svg', //[0]
               'imgs/straw.svg', // [1]
               'imgs/utensil.svg', // [2]
               'imgs/chipbag.svg', // [3]
               'imgs/eggs.svg', // [4]
              

               'imgs/glasscup.svg', //[5]
               'imgs/ketchupbottle.svg', //[6]
               'imgs/jamjar.svg', //[7]
               'imgs/milkbottle.svg', //[8]
               'imgs/popbottle.svg', //[9]
            

               'imgs/eggshell.svg', //[10]
               'imgs/apple.svg', //[11]
               'imgs/banana.svg', //[12]
               'imgs/teabag.svg', // [13]
               'imgs/leave.svg', // [14]
              

              'imgs/jug.svg', // [15]
              'imgs/tetrapak.svg', // [16]
              'imgs/container.svg', // [17]
              'imgs/plasticbottle.svg', // [18]
              'imgs/can.svg', //[19]
      
              'imgs/newspaper.svg', //[20]
              'imgs/cerealbox.svg', // [21]
              'imgs/book.svg', // [22]
              'imgs/cardboard.svg', // [23]
              'imgs/bag.svg' // [24]
]
// This is the black hole on the wall
var hole = document.getElementById("hole");
// starts functioning after 5 seconds
var start = setInterval(shuffle,5000);
// displays an random items from array one by one
function shuffle(){
    hole.addEventListener("click",function(){
    console.log("items");
    items[Math.floor(Math.random()*items.length)] 
});
}
    

<img src="imgs/hole.svg" alt="hole" id="hole" class="hole">

Hi, so this is a mini-game that teaches users how to recycle. In the screenshot, users are required to click the black gap/hole in order to display the random items one by one inside the black hole (I tried appending it but I don't know what I should create before). I am befuddled on how to achieve this. What I have doesn't seem to be enough. I appreciate solutions and tips. Thank you for reading my post.