Cannot read property 'getClient' of undefined error - spfx Microsoft Graph

I have been trying to use MS Graph in my spfx project but get the following error:

'Cannot read properties of undefined (reading 'getClient')' when running gulp serve.

I am using the following Microsoft template for the project 

https://learn.microsoft.com/en-us/sharepoint/dev/spfx/use-msgraph

I have followed the tutorial but have got nowhere trying to find a solution to this.

I am using React with the most recent version of the SharePoint framework installed on a new VM. Using SharePoint framework 1.19 and node v1.18

I have placed the following in the public render() function as shown in the tutorial:

this.context.msGraphClientFactory .getClient('3') .then((client: MSGraphClientV3): void => { client .api('/me') .get((error: any, user: MicrosoftGraph.User, rawResponse?: any) => { // handle the response });

Once I comment out the getClient('3'), the project builds successfully and loads with no errors.

Any help greatly appreciated! I've been lost in this for the last 3 days!