Tengo la siguiente lista de objetos:

mediaList[
 {id:1, url:"www.example.com/image1", adType:"image/jpeg"},
 {id:2, url:"www.example.com/image2", adType:"image/jpg"},
 {id:3, url:"www.example.com/video1", adType: "video/mp4"}
]

Necesito crear una presentación de diapositivas que tenga una duración configurable (1s, 5, 10s). Hasta ahora puedo generar una lista de los medios desdemediaList

  renderSlideshow(ad){
    let adType =ad.adType;
    if(type.includes("image")){
      return(
        <div className="imagePreview">
          <img src={ad.url} />
        </div>
      );
    }else if (adType.includes("video")){
      return(
        <video className="videoPreview" controls>
            <source src={ad.url} type={adType}/>
          Your browser does not support the video tag.
        </video>
      )

    }
  }

 render(){   
    return(
      <div>
          {this.props.mediaList.map(this.renderSlideshow.bind(this))}
      </div>
    )
 }

Lo que quiero hacer ahora es generar los medios uno a la vez con duraciones configurables para la reproducción automática.

Sé que necesito usar alguna forma de función setTimeout como este ejemplo:

setTimeout(function(){
         this.setState({submitted:false});
    }.bind(this),5000);  // wait 5 seconds, then reset to false

No estoy seguro de cómo implementarlo para este escenario. (Creo que necesitaré usar css para las transiciones de desvanecimiento, pero en primer lugar estoy perplejo sobre cómo crear la transición)