With this piece of code, it works fine when I upload only 1 file at a time, but when I upload multiple files, although console.log shows that the URL is created successfully, but when rendering, it shows failed to load resource err_file_not_found.

What's the problem with this piece of code?

const handleUpload = (e) => {
    const files = [];
    for (var i = 0; i < e.target.files.length; i++) {
      files.push(URL.createObjectURL(e.target.files[i]));
    }
    setVideos((prev) => [...prev, files]);
};

<input
  type="file"
  onChange={handleUpload}
  multiple
/>

{videos.map((video) => (
  <img src={video} alt={video} key={video} />
))}