Why is my WebRTC data channel stuck on connecting?

Question

I have been stuck for the past week debugging this problem and it just isn't working. I am currently working on a Firebase and WebRTC project and I can't get my data channel to transmit messages from one peer to another. The readyState of the data channel is always "connecting".

Client code:

const pc: RTCPeerConnection = new RTCPeerConnection(servers);
let sendChannel = null;
pc.ondatachannel = (e) => {
  console.log("data channel activated");
  sendChannel = e.channel;
  sendChannel.onmessage = handleRecieveMessage;
};

Host code:

const channel = pc.createDataChannel("sendChannel", { ordered: true });

channel.binaryType = "arraybuffer";
channel.addEventListener("open", () => {
  console.log("local channel open");
  channel.send("hello world!")
});

Also, I have a function in the host code that checks the readyState of the channel and it always returns "connecting".

I have tried numerous tutorials and also have tried this StackOverflow question that has the same problem that I have but the answers did not fix my problem.

All I want to do is to send a message from one "host" peer to another "client" peer. The "host" peer should NOT recieve messages and the "client" peer should NOT send messages.

Any help?

Thanks in advance!