How do I display a video element of a blob in React?

I’m making a video processing application where I upload a video, do some processing, and send a new video back. I’m having trouble displaying the new video in blob format on the frontend even though I was able to succesfully send it from the backend. How do I fix this?

My code for creating the blob and displaying it

.then((res) => {
        console.log(res);
        let matrixBlob = new Blob([res.data], { type: "video/avi" });
        const videoURL = URL.createObjectURL(matrixBlob);
        console.log(matrixBlob);
        console.log(videoURL);
        setVideoURL(videoURL);
      })

Console logging the blob and blobURL give me

Blob
   size: 1254491
   type: video/avi

blob:http://localhost:5173/9b71e82e-7d6f-406a-ae9b-fa500dd68398

Displaying the video

{/* Returned files */}
        <h3 className="title text-lg font-semibold text-neutral-600 mt-10 border-b pb-3">
          Returned Files
        </h3>
        {videoURL && (
          <video controls width={550}>
            <source src={videoURL} type="video/avi" />
          </video>
        )}

Video not being displayed correctly: problem