Eu tenho a seguinte 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"}
]

Preciso criar uma apresentação de slides com uma duração configurável (1s, 5, 10s). Até agora, posso gerar uma lista da mídia a partir domediaList

  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>
    )
 }

O que eu quero fazer agora é gerar a mídia, uma de cada vez, com durações configuráveis para reprodução automática.

Eu sei que preciso usar alguma forma de uma função setTimeout como este exemplo:

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

Só não tenho certeza de como implementá-lo para esse cenário. (Eu acredito que vou precisar usar css para as transições fade, mas estou apenas confuso sobre como criar a transição).