403(Forbidden) Invalid permission error in my SPFx web part when trying to access SharePointSiteUsageDetail with MSGraph

Question

I can GET data in Graph Explorer, but when I try in my SPFx solution it gives me an 403(Forbidden) error:

https://graph.microsoft.com/beta/reports/getSharePointSiteUsageDetail(period='D30')?$format=application/json

In the package-solution.json file,I set these permissions:

"webApiPermissionRequests": [                                
      {"resource": "Microsoft Graph","scope":"User.ReadBasic.All"},
      {"resource": "Microsoft Graph","scope": "sites.Read.All"},
      {"resource": "Microsoft Graph","scope": "Reports.Read.All"}]

I have this to init the graph API connection:

 public GetUsageData = (): void => {
    this.props.context.msGraphClientFactory
      .getClient()
      .then((msGraphClient: MSGraphClient) => {
        const period = 7;
        msGraphClient
          .api(
            "reports/getSharePointSiteUsagePages(period='D" +
              period +
              "')?$format=application/json"
          )
          .version("beta")
          .get((err, report: any, res: any) => {
            if (err) {
              console.log("Error occured from usage", err);
            }
            console.log("Error occured usage data", err);
            console.log("Response usage data", res);
            res.value.map((result) => {
              this.allUsage.push({
                storageUsedInBytes: result.storageUsedInBytes,
                storageAllocatedInBytes: result.storageAllocatedInBytes,
              });
            });
            this.setState({ usageDataState: this.allUsage });
          });
      });
  };

I have set the required Report.Read.All permission to "SharePoint Online Client Extensibility Web Application Principal"

API access:

Error: