react-video-js-player "No compatible source was found for this media"

Question

I am working on a product that takes a file from API and read as a blob. But pressing the play button on the video does not work. I have tried using tried using querySelector or a useState variable. All not working. There are no errors as you can see from the Logs.

It can read a local file but not from the API.

const [outputImg, setOutputImg] = useState(null);

useEffect(() => {
    getOutput()
    
}, [])
    
async function getOutput() {
    await axios.get("/output-image", {responseType: "blob"})
      .then((response) => {
         var imageUrl = (window.URL || window.webkitURL).createObjectURL(response.data);
         setOutputImg(imageUrl);
         var vid = document.querySelector(".img1")
         console.log(response)
     })
    
     console.log("Output image", outputImg)
}

HTML section

<VideoPlayer className="img1" src={outputImg} poster={posterImg} controls width="100%" height="100%" />

File Type Log

Display