How to put sleep in loop in react app

Question

I have following code in index.js

class Main extends React.Component {    
    constructor(){
        super();
        this.state = {
            remainingBoxes : 0,
            gridFull: Array(this.rows).fill().map(() => Array(this.cols).fill({
                isVisited : false,
                isCurrent : false    
            }))
        }
    }

play = () => {
    // Temporary array to modify     
    let g2 = arrayClone(this.state.gridFull);
    while(condition){
       while(condition){
        /* Logic */
        // want to see change by applying
        this.setState({
        gridFull: g2,
        remainingBoxes: total,
       });
    /*    Changes will made here     */
      }

      while(condition){
        /* Logic */
        // want to see change by applying
        this.setState({
        gridFull: g2,
        remainingBoxes: total,
        });
   /*    Changes will made here     */
     } 

    }
}

I just want to see all changes in 2d array on the page.So I used setState to change state. In the loop, it changes state too fast. I want to see one by one(1-second sleep). I used setinterval but loop doesn't wait for anybody. I used the async function but it didn't work. So can you suggest any methods to put sleep in loops so a human can see changes?