React中video元素渲染空白无视频无报错问题求助

我完全搞不懂为什么截图里的video元素没法显示我上传的视频。视频本身没损坏，在VSCode里能正常播放，也修改了文件权限，但在Firefox、Chrome和Brave浏览器里都显示空白，时间戳显示为0:00。

项目文件结构 #

app-name/
         App.js
         src/
             components/
                    VideoForm.js
                    VideoList.js
                    VideoItem.js
             media/
                    poppies.mp4

各文件代码 #

App.js #

import "./App.css";
import VideoForm from "./components/VideoForm";
import VideoList from "./components/VideoList";

function App() {
  const [videos, setVideos] = useState([]);

  return (
    <div className="App">
      <VideoForm videos={videos} setVideos={setVideos} />
      <VideoList videos={videos} />
    </div>
  );
}

export default App;

VideoForm.js #

import React from "react";

const VideoForm = ({ videos, setVideos }) => {
  const handleChange = (event) => {
    event.preventDefault();
    setVideos([
      ...videos,
      { name: event.target.files[0].name, type: event.target.files[0].type },
    ]);
  };

  return (
    <div>
      <input type="file" onChange={handleChange} />
    </div>
  );
};

export default VideoForm;

VideoList.js #

import React from "react";
import VideoItem from "./VideoItem";

const VideoList = ({ videos }) => {
  console.log("videoList", videos);

  return (
    <div id="video-container">
      {videos &&
        videos.map((video) => (
          <VideoItem key={video.name} file={video.name} type={video.type} />
        ))}
    </div>
  );
};

export default VideoList;

VideoItem.js #

import React from "react";

const VideoItem = ({ file, type }) => {

  const videoPath = "../media/" + file;

  return (
    <div>
      <video controls>
        <source src={videoPath} type={type} />
      </video>
    </div>
  );
};

export default VideoItem;

内容的提问来源于stack exchange，提问作者smunizaga