TypeError: Cannot read properties of undefined (reading 'load')

Recieivng the abiove error code. I have looked oer the Google docs and was able to get it to work on there site. But when I take there code and put into my react app it gives me that error.

CODE:

/* global gapi */

import React from 'react';
import './App.css';
import {Link} from 'react-router-dom'

class CreateAccount extends React.Component {
    state = {
        username:"none",
        password:"none",
        email:"none"
    }

    acctHandleUserNameChange = event =>{
        this.setState({
            username: event.target.value
          })
    }

    acctHandlePasswordChange = event =>{
        this.setState({
            pasword: event.target.value
          })
    }

    acctEmailChange = event =>{
        this.setState({
            email: event.target.value
        })
    }

    makeApiCall() {
        var params = {
            spreadsheetId: 'xxxxxxxxxxxxxxxxxxxxx',
            range: 'A1:A3',
            valueInputOption: 'USER_ENABLED',
            insertDataOption: 'INSERT_ROWS', 
        };

        var valueRangeBody = {
            "values": [
                [
                  this.state.username,
                  this.state.password,
                  this.state.email
                ]
            ]          
        };

        var request = window.gapi.client.sheets.spreadsheets.values.append(params, valueRangeBody);
        request.then(function(response) {
        // TODO: Change code below to process the `response` object:
            console.log(response.result);
        }, function(reason) {
            console.error('error: ' + reason.result.error.message);
        });
    }

    initClient() {
        var API_KEY = 'xxxxxxxxxxxxx';
        var CLIENT_ID = 'xxxxxxxxxxx';  // 

        // TODO: Authorize using one of the following scopes:
        //   'https://www.googleapis.com/auth/drive'
        //   'https://www.googleapis.com/auth/drive.file'
        //   'https://www.googleapis.com/auth/spreadsheets'
        var SCOPE = 'www.googleapis.com/auth/spreadsheets';

        window.gapi.client.init({
          'apiKey': API_KEY,
          'clientId': CLIENT_ID,
          'scope': SCOPE,
          'discoveryDocs': ['https://sheets.googleapis.com/$discovery/rest?version=v4'],
        }).then(function() {
          gapi.auth2.getAuthInstance().isSignedIn.listen(this.updateSignInStatus());
          this.updateSignInStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
        });
      }

    handleClientLoad = () => {
        window.gapi.load('client:auth2', this.initClient());
      }

    updateSignInStatus(isSignedIn) {
        if (isSignedIn) {
          this.makeApiCall();
        }
      }

    handleSignInClick(event) {
        window.gapi.auth2.getAuthInstance().signIn();
      }

    handleSignOutClick(event) {
        window.gapi.auth2.getAuthInstance().signOut();
      }

    handleCreateAccount(){
        console.log("test Start");
        this.handleClientLoad();
        console.log("test end");
    }

    render(){
        return (
            <div>
                <p>
                    <input type="text" placeholder="Enter username" onChange={event => this.acctHandleUserNameChange(event)}></input>
                </p>

                <p>
                    <input type="text" placeholder="Enter password" onChange={event => this.acctHandlePasswordChange(event)}></input>
                </p>
                <p>
                    <input hint="email" placeholder="Enter email" type="text" onChange={event => this.acctEmailChange(event)}></input>
                </p>
                <p>
                    <button onClick={()=>this.handleCreateAccount()}>Create</button>
                </p>
                <p>
                    <Link to="/">
                        <button>Back</button>
                    </Link>
                </p>
            </div>
        );
    }
}

export default CreateAccount;