Show each div in HTMl collection for 1 sec then hide it

I have 10 divs inside a container.

I want to show 1 div for 1 second the remove it and show notthing for 1 sec then show next div for 1 sec and so on.

Right now I started with all divs having a class of hide which is display:none in CSS.

And in JS this is what I have for the moment:

function showOneAtTheTime() {
    myShapes(); // function which creating the 10 divs
    let all = document.getElementsByClassName('boxes');  //getting the html collection    
    for (let i = 0; i <= all.length; i++) {
    const boxSelect = all[i]; // each div
    /*HERE I thought I add the code to show 1 div for 1 second the blank for 1 sec
      then show next div*/


}

}