play video one by in one in ReactPlayer using reactjs?

Question

I have an array of allUrls[0] which contains the Urls at it each index. Through this code I'm able to play first video of it but the video is not playing next link.

import React, { useEffect, useState } from "react";
import { connect } from "react-redux";
import { Button } from "@material-ui/core";
import "./VideoEditorPreview.css";
import ImgCropper from "../Cropper/ImgCropper";
import { assetDownloadUrl } from "../../actions/asset";
import ReactPlayer from 'react-player'

const VideoEditorPreview = ({
  asset,
  dispatch,
  previewFile,
  VideoEditorPreviewWidth,
  VideoEditorPreviewHeight,
  showDia,
  setShowDia,
}) =>
{

  const [data, setData] = useState([])
  useEffect(() =>
  {
    if (data)
    {
      let items = JSON.parse(localStorage.getItem("timelineFrames"))
      setData([{ items: items[0].files }])
    }
  }, [])
  console.log(data);


//in this function I mapped the allUrls to get all the url
  const allUrls = data.map((item) =>
  {
    let a = []
    console.log(data[0].items);
    for (let index = 0; index < data[0].items.length; index++)
    {
      a.push(item.items[index].url);

    }
    return a
  })
  console.log(allUrls[0]); //its contain the list of url

//tried this function but didn't worked
  const nextVideo = allUrls.map((item) =>
  {
    for (let index = 0; index < allUrls[0].length; index++)
    {
      return (item + 1);

    }
  })
  console.log(nextVideo);


  return (
    <>

          <ReactPlayer id="vid" height="100%" width="100%" url={allUrls[0]}  controls />
          
    </>
  );
};

const mapStateToProps = (state) => ({
  asset: state.asset,
});
export default connect(mapStateToProps)(VideoEditorPreview);

I thought about adding next video button to it but I think I implemented in wrong way.

Image contains information about of allUrls[0]