using microsoft graph to get user profile properties from azure and O365 groups on a SPFX webpart

Question

I been trying to get information from the Azure AD using the code below, but the result is Error fetching user profile undefined

I am running the webpart with gulp serve

on my serve.json file I have my sharepoint site collection url so it opens the workbench with the sitecollection url

import * as React from 'react';
import { IMyWebPartProps } from './IMyWebPartProps';

import { MSGraphClientV3 } from '@microsoft/sp-http';
import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';

export interface IMyWebPartState {
userTitle: string | null;

error: string | null;

apiData: any | null;

users: Array<IUserItem>;

}

let displayNames='Doe, Jon';

export default class MyWebPart extends React.Component<IMyWebPartProps, IMyWebPartState> {

constructor(props: IMyWebPartProps) {

super(props);

this.state = {

  userTitle: null,

  error: null,

  apiData: null,

  users: []

};
```  }

  componentDidMount() {

this.getUserProfiles2();

  public async getUserProfiles2(): Promise<void> {

// Use msGraphClientFactory to get the MSGraphClientV3 instance

.getClient('3') // This retrieves an instance of MSGraphClientV3

.then(async (client: MSGraphClientV3) => {

// Use Promises and then() for the API call to avoid callback-based errors

client.api('/me')

 .version('v1.0')  // You can specify the API version here

 .get(async (err,res)=>{

       if (err){

         console.error("error ",err);

         return

       }

       console.log("res: ",res.value)

       return res.value  

 })

 .then(async (user: MicrosoftGraph.User) => {

   // Handle the successful response here

   console.log("User:", user);

 })

 .catch((error: any) => {

   // Handle error if the API request fails

   console.error('Error fetching user profile:', error);

 });

})

.catch((error: any) => {

// Handle errors in initializing MSGraphClientV3

console.error('Error initializing MSGraphClientV3:', error);

});

  public render(): React.ReactElement<IMyWebPartProps> {

const { userTitle, error } = this.state;

return (

<div>

<h1>Testing</h1>

</div>

);

 }

on my package-solution.json I have added:

 "webApiPermissionRequests": [  
{  
"resource": "Microsoft Graph",  
"scope": "User.Read.All"  
},

{

"resource": "Microsoft Graph",

"scope": "GroupMember.Read.All"

},

{

"resource": "Microsoft Graph",

"scope": "Group.Read.All"

},

{

"resource": "Microsoft Graph",

"scope": "Directory.Read.All"

}

]