I had been working on a component wherein when we upload an image from the desktop, It initially created an object URL using the URL.createObjectURL(). But, I recently read somewhere that createObjectURL is deprecated for the MediaStream. Also, I was getting this error:

"Failed to execute 'createObjectURL' on 'URL': Overload resolution failed."

I also got to know that we could set the srcObject to the MediaStream and that would work. But, for image upload, it was not working. Is there any way wherein I can create the temporary URL and set the img tag's src to that so that I am able to preview it on the web page? Any help is appreciated, Thanks!

Here is the code that I was previously using

const el = profilePicture.current;
const myMemoObj = URL.createObjectURL(event.target.files[0]);
el.src = URL.createObjectURL(event.target.files[0]);
URL.revokeObjectURL(myMemoObj);

I also tried setting the el.srcObject to event.target.files[0] but it didn't work out.

Edit: profilePicture is a ref attached to an img tag in the same component

profilePicture = useRef(null);
.
.
.
<img ref={profilePicture} alt="Profile Picture"/>