SPFx Graph API Response Handling - api

Question

My SPFx webpart is working well until I try to return the result of an Graph API call. The below code is trying to get the users that have permissions to the root file library for the site the webpart is installed.
The console.log("Reached the Graph") shows up in the inspector console so I'm guessing it has something to do with the .push() I'm using to append each returned record to the response declared at the beginning of the method.
I also tried the more documented .forEach() below without success. Any Ideas?
private _loadUser(): MicrosoftGraph.Permission[] {
let response: MicrosoftGraph.Permission[];
this.props.context.msGraphClientFactory
.getClient()
.then((client: MSGraphClient): void => {
let apiUrl: string = '/groups/'+this.props.group+'/drive/items/root/permissions';
client
.api(apiUrl)
.version("v1.0")
.get((error?, result?: MicrosoftGraph.Permission[], rawResponse?: any) => {
// handle the response
if(error){
console.error(error);
}
if (result) {
console.log("Reached the Graph");
for (let res of result){
response.push(res);
}
}
}
);
});
return response;
}
result.forEach(element => {
response.push(element);
console.log(element.grantedTo.user.displayName);
});