i know that there are question similar to this one, but my goal is different.

I have an array of Sceneobjects like this:

 const scene = {
      Id: Math.floor(Math.random() * 10000),
      JsonObj: canvas.getJsonObj(),
      image: this.editor?.export.toImage(),
      duration: 1000,
    };

And am using a library PikasoJS that alows me to export/import an image of a html div.

I put each image of div in scene object, and i want to display all these images in array scenes one by one automatically, and duration of scene is specified in duration field.

How can i implement something like this, i tried working with setInterval but it didn't work as i espected:

 const playScene = () => {
    const cpScenes = [...scenes];
    let i = 0;
    for(let i = 0;i < cpScenes.length;i++) {
      setTimeout(() => {
        let image = cpScenes[i].image;
        console.log("am runnig");
        this.editor.loadImage(image);
      }, cpScenes[i].duration);
    }
    clearTimeout();
  };

The way am thinking is that setTimeout should block execution of for loop and then executes it's code after specified time. But from what i noticed i was wrong.

This is my first time working with react and js.