I'm using react-player component for this.

I have file 1 where I'm storing some data as an array, including a local video.

import videoSample from "../assets/videos/sample-video.mov";

export const Data = {
  ProjectList: [
    {
      title: "My title",
      desc: "Some description",
      videoUrl: { videoSample },
      sourceUrl: "https:// ... ",
    },
  ],
};

File 2 takes the array and maps each item to a React component called ProjectDetail.

function MappingFunction() {
  return (
    <>
      {Data.ProjectList.map((project, index) => (
          <ProjectDetail key={index} {...project} />
      ))}
    </>
  );
}

Finally, this is file 3 which contains ProjectDetail. It takes the array item as props. videoUrl is passed to the ReactPlayer component.

export default function ProjectDetail(props) {
  return (
    <>
      <div>
        <ReactPlayer 
           url={props.videoUrl}  // does not work!
           width="500px"
        />
      </div>
      <div>
        <h2>{props.title}</h2>  // works
        <p>{props.desc}</p>     // works
        <button 
          onClick={() => { window.open(props.sourceUrl, "_blank"); }}  // works
        > Click to see more
        </button>
      </div>
    </>
  );
}

title, desc and sourceUrl are working fine, but I don't understand videoUrl doesn't. I tried looking up an answer but was unsuccessful.

If I import videoSample in file 3 directly, it works fine, but not when passed as a prop from outside. What am I missing?