How to Implement an Image Download Dialog in Safari Like remove.bg?

Question

I'm working on a project where I need to enable users to download images directly from the browser, specifically Safari on iOS. I've noticed that remove.bg offers a neat feature where users can long-press an image and are then presented with a dialogue box offering options like "Save Image," "Copy," and others.

Here's what my current implementation looks like (simplified for clarity):

import Image from "next/image";
import { useState } from "react";
import SampleImage from "../public/images/background-remove/1/1.jpg";

export default function Share() {
  const [errorMessage, setErrorMessage] = useState("");

  const handleShare = () => {
    try {
      navigator.share({
        title: "Share Title",
        text: "Share Text",
        url: SampleImage,
      });
    } catch (error) {
      setErrorMessage(error.message);
    }
  };

  return (
    <div className="h-screen p-4">
      <div className="rounded border p-4">
        <Image width={500} height={500} src={SampleImage} alt="Placeholder" />
      </div>
      <button onClick={handleShare} className="mt-4 rounded border px-4 py-2.5">
        Share Button
      </button>
      {errorMessage && <div className="mt-4 text-red-500">{errorMessage}</div>}
    </div>
  );
}

In Safari, instead of a direct download option, a share dialog box appears that includes a 'Save Image' option. I have successfully implemented the share dialog box in my code, but the 'Save Image' option does not appear within this dialog. How can I resolve this issue?