Web Share API permission missing

I'm trying to implement the Web Share Api functionality on my test web app but it doesn't seem I'm able to do it. This is the code:

const newVariable: any = navigator;
{newVariable && newVariable.share && <IconButton aria-label="Share" onClick={async (e) => {
try {
  const id = await shareRepository.shareTrip(this.props.todolist)
  const url = "https://something.com/share/" + id
  await newVariable.share({
      title: 'Check my todolist for ' + this.props.todolist.trip.departure + ' - ' + this.props.todolist.trip.arrival,
      text: 'Check my todolist for ' + this.props.todolist.trip.departure + ' - ' + this.props.todolist.trip.arrival,
      url: url,
  })
} catch (error) {
  alert(error)
}
}}>
<ShareIcon />
</IconButton>}

Every time I try on both Firefox and Safari for iOS, I'm getting an error saying:

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

If on those browser I try to share something from google.com I get the native dialog to choose with which app to share.

I cannot understand why. On this page there is no discussion about permission: https://developers.google.com/web/updates/2016/09/navigator-share