Unable to properly access array elements in Javascript object

I am creating a custom javascript object and attempting to access it with the following code.

function readBids(pairs) {
    let i = 0;

    const TrianglePair = {pair: [], price: []};

    var xhReq = new XMLHttpRequest();

    var URL = "https://api.kucoin.com/api/v1/market/orderbook/level2_20?symbol=";

    var timer = window.setInterval(function(){
        if( i == (pairs.length - 1) ){
            window.clearInterval( timer );
        }

        xhReq.open("GET", URL + pairs[i], false);
        xhReq.send(null);
        var jsonObject = JSON.parse(xhReq.responseText);
    
        var tempVal = jsonObject.data.bids[i][0];
        document.getElementById('bids').innerHTML = pairs[i]+ ": " + tempVal;
        
        TrianglePair.pair[i] = pairs[i];
        TrianglePair.price[i] = tempVal;

        i++;
    }, 10);

    return TrianglePair;

}

const pairs = ["ETH-USDT", "BTC-USDT", "ETH-BTC"];
let i = 0;

var timer = window.setInterval(function(){
    if( i == 99999 ){
        window.clearInterval( timer );
    }
    //readAsks(jsonObject);
    const trianglePair = readBids(pairs);
    console.log(trianglePair);
    console.log(trianglePair.pair[0]); //This is what is not working
    i++;
}, 1000);

The object trianglePair is properly outputted to the console, as you can see with the attached screenshot. However, when I try accessing an individual element in the array, it is stated as undefined. This is very simple code, so I am not sure what the issue is. Log image