Reading image from sharepoint with access_token, now want to display as image on site but saving it gives the name “download” and no extension?

(This code is in JS/React)
So I’m getting an image from my Sharepoint using the following:

export const readBlob = async (absolutePath, relativePath, access_token) => {
  const res = await axios.get(
    `${absolutePath}/_api/web/GetFileByServerRelativePath(decodedurl='${relativePath}')/$value`,
    {
      headers: {
        Accept: "image/*",
        Authorization: `Bearer ${access_token}`,
      },
      responseType: "arraybuffer",
    }
  );
  const blob = new Blob([res.data]);
  return blob;
};

Here’s how I fetch my picture:

  const fetchPicture = async (file) => {
    if (file && file.Name) {
      const blob = await readBlob(
        absolutePath,
        file.ServerRelativeUrl,
        access_token
      );
      blob_to_dataURI(blob, function (dataURL) {
        setImage(dataURL);
        dispatch(rerender());
      });
    }
  };

Then I’m setting the image:

  {image && (
    <img
      className="c-asset__image"
      src={image}
      onClick={() => setShowModal(true)}
    />
  )}  

As you can see, I’m setting the DATA_URL of the blob of the image I got from Sharepoint (with an access_token) to be the source of the Image-HTML-tag. This works, the image displays nicely.

However, how can I set the Right-Click => Save Image As… text? Right now it says “download” with no extension. Does anyone know?

EDIT: I don’t care what hacky way is needed or what package need to be installed, I just need it to work 🙂