Web Share API only works a single time in iOS Safari

Question

I have a simple "share button" component in my React app that uses the Web Share API to share a link. Interestingly, in mobile safari it only seems to work a single time for a given pageload. Subsequent clicks on the share button result in the following error:

NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

The first click works fine, resulting in the native iOS share sheet appearing with the selection of share options. The subsequent failure occurs regardless of whether the initial share is cancelled or actioned.

Here's the relevant code that produces the issue:

export const SharerButton: React.FC<Props> = ({
  children,
  className,
  url,
  title,
  text,
  onShareSuccess = () => null,
  onShareCancel = () => null,
  kind = 'primary',
  successText = 'Link copied',
}) => {

  const handleShare = async () => {
    const canShare =
      (navigator.canShare !== undefined &&
        navigator.canShare({ title, text, url })) ||
      navigator.share !== undefined;

    if (!canShare) {
      // fallback share (copy to clipboard)
      return;
    }

    return navigator
      .share({ title, text, url })
      .then(() => onShareSuccess(true))
      .catch((error) => {
        console.error(error);
        onShareCancel(true);
      });
  };

  return (
    <Button
      className={className}
      kind={kind}
      icon="share"
      onClick={handleShare}
    >
      {children}
    </Button>
  );
};

Any idea why this could be happening?

I've managed to reproduce the issue in this simple CodeSandbox: https://xgxrn.csb.app/

iOS version: 14.1 Model: iPhone 11 Pro