How to configure WebRTC peer connection with Twilio

Question

I'm trying to configure my WebRTC app to use Twilio's TURN server. Note that I'm using a trial account for Twilio.

I've tried this

First, I'm sending a request to retrieve ICE servers from Twilio(Yes I know it's not safe requesting from client side. At the moment I just want to know how it works).

function requestIceServers(){
let accountSid = 'xxx';
let authToken = 'xxx';

const url = "https://api.twilio.com/2010-04-01/Accounts/" + accountSid + "/Tokens.json";

fetch(url, {
    headers: {
      Authorization: "Basic " + btoa(accountSid + ":" + authToken)
    },
    method: "POST"
  })
.then(response => {
    if(response.ok)
        return response.json();
    else
        throw new Error("Failed to get ICE servers");
})
.then( data => pcConfig = data.ice_servers)
.catch((error) => {
    console.log(error);
    pcConfig = {
        iceServers: [
            {
                urls: 'stun:stun.l.google.com:19302'
            }
        ]
    };
})
};

and then I try to configure peer connection

function createPeerConnection() {
if (typeof pcConfig !== "undefined"){
    try {
        turnServers = pcConfig.shift(); //trying to force turn servers. But anyway I also tried without shifting the array.
        console.log(turnServers);
        pc = new RTCPeerConnection(turnServers);
        pc.onicecandidate = handleIceCandidate;
        pc.onaddstream = handleRemoteStreamAdded;
        pc.onremovestream = handleRemoteStreamRemoved;
        console.log('Created RTCPeerConnnection');
    } catch (e) {
        console.log('Failed to create PeerConnection, exception: ' + e.message);
        alert('Cannot create RTCPeerConnection object.');
        return;
    }
}
else {
    console.log("ICE servers are undefined");
}
}

I can see from the logs that I am getting a successful response from Twilio. I think the issue is how I'm handling the returned data or how I'm configuring the peer connection.