Video can't press play on React

Question

I have a working 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.

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

<video src={outputImg} className="img1 video-js vjs-default-skin" style={{position: "absolute"}}autoPlay controls preload="auto" width="100%" height="100%" data-setup='{"textTrackSettings": false}'/>

Data type log

Fetching method

Video tag

Display