google.accounts.oauth2.initCodeClient callback is not triggered for google sheets api

Goog morning from Sri Lanka!!! here goes my first question in StackOverflow. I am a novice, and bear with me its total stupid question.

I am trying to get google sheets data for wordpress site using plugin. It seems to me that callback is not triggering. tried searching and reading, but nothing give me answer. Add to that, there is no quickstart guide for google identity services- Google sheets api. all I get from google developer sites is the old way of using api.js, which themselves say its deprecated. GIS migration guide gave me some lime light, but I am stck.

I am not using any frameworks, just plain php and js in wordpress environment. my PHP code is,

<?php
/**
 * Plugin Name: my plugin
 * Description: Gets data from Google Sheets. 
 * Version: 1.0.0
 * Author: Sky the man ([email protected])
 */

function sky_enqueue_scripts() {
    wp_register_script('gapi-script', 'https://apis.google.com/js/api.js', array(), null, true);
    wp_register_script('gis-script', 'https://accounts.google.com/gsi/client', array(), null, true);
wp_enqueue_script('gst-script', plugins_url('GroupStageTable.js', __FILE__), array('gapi-script', 'gis-script'), null, true);

        $translation_array = array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('skyNonce')
    );
    wp_localize_script('gst-script', 'myAjaxObject', $translation_array);
}

add_action('wp_enqueue_scripts', 'sky_enqueue_scripts');



function process_auth_code() {
    check_admin_referer('skyNonce', 'security');
    $code = isset($_POST['code']) ? sanitize_text_field($_POST['code']) : '';
    if (!empty($code)) {
        $google_sheets_data = fetch_data_from_google_sheets($code);
        if (!empty($google_sheets_data)) {
        wp_send_json_success($google_sheets_data);
        } else {
            wp_send_json_error(array('message' => 'Failed to fetch data from Google Sheets'));
        }
    } else {
        wp_send_json_error(array('message' => 'Authentication code is missing or invalid'));
    }

    // Always exit at the end of an AJAX callback
    wp_die();
}

add_action('wp_ajax_process_auth_code', 'process_auth_code');
add_action('wp_ajax_nopriv_process_auth_code', 'process_auth_code');

function my_js_shortcode() {
    ob_start(); // Start output buffering
    ?>
    <div id="google-sheets-data">
        <p id="google-sheets-output">skyoutput</p>
    </div>
    <?php
    return ob_get_clean(); // Return the buffered content
}

add_shortcode('grouptables', 'my_js_shortcode');

?>

and my javascript code GroupStageTable.js is;

var client;
var skyNonce = myAjaxObject.nonce; 
console.log('Nonce', skyNonce);

function initClient() {
    console.log("init client called");
    client = google.accounts.oauth2.initCodeClient({
        
        client_id: '******-******************.apps.googleusercontent.com',
        scope: 'https://www.googleapis.com/auth/spreadsheets.readonly',
        ux_mode: 'popup',
        
        callback: (response) => {
            if (response.error) {
            console.error('Google Auth Error', response.error);
            } else {
            console.log('Google Auth Response', response);
            const code = response.code;
            sendAuthCodeToServer(code, skyNonce);
            }
        }
    });
}
          

function sendAuthCodeToServer(code, skyNonce) {
    console.log('sendAuthCodeToServer Code', code);
     const xhr = new XMLHttpRequest();
    const params = new URLSearchParams({
        action: 'process_auth_code',
        code: code,
        security: skyNonce 
    });
    console.log("auth code sent");
    xhr.open('POST', myAjaxObject.ajax_url, true); 
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
    
   xhr.onload = function() {
    var response = JSON.parse(xhr.responseText);
    if (xhr.status === 200 && response.success) {
        console.log("xhr loaded");
        
        gapi.client.sheets.spreadsheets.values.get({
            spreadsheetId: '**********',
            range: "********"
        }).then(function(response) {
            console.log("Data from Google Sheets:", response.result);
        });
        
    } else {
        // Handle errors
        console.error('Error:', response.data.message);
    }
};
xhr.send(params.toString());

}


function updateContent() {
    console.log("updateContent called");
    initClient();
}

document.addEventListener('DOMContentLoaded', function() {
    updateContent(); 
});

console logs only following.

"Nonce 09d3f96985", "updateContent called", "init client called".

tried disabling theme, other plugins and did run on incognito mode but no avail. all 3 scripts are loaded, and there is no console errors.

I am bit lost. what went wrong?