Sharing vCard using Web-Share API: Permission Denied

I have the following code to share vCard on my android device.

        <Button
          variant={buttonColorHandler()}
          onClick={handleAddToContact}
        >
          Add to Contact
        </Button>

And handler

const handleAddToContact = async () => {
    console.log('Add to contact');
    console.log(navigator.canShare);
    const res = await fetch('/vcard.vcf');
    const data = await res.blob();
    const file = new File([data], 'vcard.vcf', { type: 'text/vcard' });
    const shareData = {
      files: [file],
      title: 'vCard',
    };

    console.log(shareData);
    console.log(navigator.canShare(shareData)); // getting true here


    navigator
      .share(shareData)
      .then(() => {
        console.log('Data was shared successfully');
      })
      .catch(err => {
        console.log(err);
      });
  };

When I’m running the following code and after clicking on Button I’m getting following exception

DOMException: Permission denied