React Image: createObjectURL link gives error 404 (Not Found)

I created an ImageUrl using the following code in React with Typescript. It made a URL, however does not show a picture image. Clicking on the URL eg "http://localhost:3003/0b4de100-d8eb-49a7-b43a-e2147310abbe" gives error below. How can I fix this ?

Error:

http://localhost:3003/0b4de100-d8eb-49a7-b43a-e2147310abbe Failed to load resource: the server responded with a status of 404 (Not Found)

Code:

 const [photoURL, setPhotoUrl] = useState<string>('');

 const pictureData = await getPatientAvatar(patientId);
 const blob = new Blob([pictureData], { type: 'image/jpeg' });
 const imageUrl = URL.createObjectURL(blob);
 setPhotoUrl(imageUrl);

 <img src={photoUrl} />

Picture in Network Tab:

from React Image: createObjectURL link gives error 404 (Not Found)