WebRTC DataChannel is always in 'connecting' in Google Chrome

Question

I am trying to exchange data between two local peers (in two chrome tabs) using webRTC datachannel, but it is always stuck in the 'connecting' state. However, everything works smoothly is firefox.

I found a similar question here - webRTC datachannel is not working in chrome62 but still no working solution

Here is my code snippets :

let DataChannel
const iceServers = {
"iceServer" : [
    {"urls" : "stun:stun.services.mozilla.com"},
    {"urls" : "stun:stun.l.google.com:19302"}
]}

socket.on('ready', () => {
if(isCaller) {
    console.log('caller is ready to create offer')
    rtcPeerConnection = new RTCPeerConnection(iceServers)
    DataChannel = rtcPeerConnection.createDataChannel(RoomNumber, {negotiated: true, id:0})
    DataChannel.onmessage = event =>{
        CallName.innerText = event.data
    }
}})

socket.on('offer', (event) => {
if(!isCaller) {
    console.log( 'ready to create answer')
    rtcPeerConnection = new RTCPeerConnection(iceServers)
    DataChannel = rtcPeerConnection.createDataChannel(RoomNumber, {negotiated: true, id:0})
    DataChannel.onmessage = event =>{
        CallName.innerText = event.data
    }
}})

SetCallName.onclick = () => {
if (InputCallName.value ===""){
    alert("please enter a call name")
}
else{
    console.log(InputCallName.value)
    DataChannel.send(InputCallName.value)
    CallName.innerText = InputCallName.value
    // DivCallName.innerHTML = InputCallName.value

}}

On button click, it am getting this error:

Uncaught DOMException: Failed to execute 'send' on 'RTCDataChannel': RTCDataChannel.readyState is not 'open' at HTMLButtonElement

Again everything is good in Firefox. I was currently using chrome because of its chrome://webrtc-internals/ feature