WebRTC data channel onmessage not fired in nextjs framework

[chris-opendata]

Summary

I am porting a working WebRTC voice chat from Django/javascript base into nextjs(v15)/tsx framework. Voice/audio chat works perfectly after porting, but the data channel's onmessage never got fired. Is there any extra setup required in the Next.js/tsx framework?
Here is most of the class implementation:

export class VoiceChat {
    private remoteAudioRef: RefObject<HTMLAudioElement|null>;
    private peerConnection: RefObject<RTCPeerConnection|null>;
    private dataChannel: RefObject<RTCDataChannel|null>;
    private localMediaStream: RefObject<MediaStream|null>;

    constructor() {
        this.localMediaStream = createRef<MediaStream>();
        this.remoteAudioRef = createRef<HTMLAudioElement>();
        this.peerConnection = createRef<RTCPeerConnection>();
        this.dataChannel = createRef<RTCDataChannel>();
    }

    private preparePeerConnection() {
        this.peerConnection.current = new RTCPeerConnection();
    }

    private async prepareLocalAudioFeed() {
        if (this.peerConnection.current != null) {
            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
            this.localMediaStream.current = stream;
            this.peerConnection.current.addTrack(stream.getTracks()[0]);
        }
        else {
            throw new Error("Peer connection is null!");
        }
    }

    private prepareRemoteAudioFeed() {
        if (this.peerConnection.current != null) {
            this.remoteAudioRef.current = document.createElement("audio");
            this.remoteAudioRef.current.autoplay = true;
            this.peerConnection.current.ontrack = (event) => {
                if (this.remoteAudioRef.current != null) {
                    this.remoteAudioRef.current.srcObject = event.streams[0];
                }
            };
        }
        else {
            throw new Error("Peer connection is null!");
        }
    }

    private async handShakeSDP() {
        if (this.peerConnection.current != null) {
            const offer = await this.peerConnection.current.createOffer();
            await this.peerConnection.current.setLocalDescription(offer);
            const sdpResponse = await fetch(`${baseUrl}?model=${model}`, {
                ......
            });

            const answer = {
                type: "answer" as RTCSdpType,
                sdp: await sdpResponse.text(),
            };
            await this.peerConnection.current.setRemoteDescription(new RTCSessionDescription(answer));
        }
        else {
            throw new Error("Peer connection is null!");
        }
    }

    async start() {
        this.preparePeerConnection();
        await this.prepareLocalAudioFeed();
        this.prepareRemoteAudioFeed();
        await this.handShakeSDP();

        // Create data channel
        if (this.peerConnection.current != null) {
            this.dataChannel.current = this.peerConnection.current.createDataChannel(
                                            "chat", 
                                        );

            this.dataChannel.current.onopen = (evt) => console.log("DataChannel opened");
            this.dataChannel.current.onclose = () => console.log("DataChannel closed");
            this.dataChannel.current.onerror = (error) => console.error("DataChannel error:", error);            

            this.dataChannel.current.onmessage = (event) => {
                console.log('Received message:', event.data);
                const e = JSON.parse(event.data);
                switch (e.type) {
                    case 'response.audio_transcript.done':
                        console.log("response.audio_transcript.done received.");
                        break;
                    case 'conversation.item.input_audio_transcription.completed':
                        console.log("conversation.item.input_audio_transcription.completed received.");
                        break;
                    case 'session.created':
                        break;
                    case 'error':
                        // logEvent(e.error);
                        if (e.code === 'session_expired') this.stopConnection();
                        break;
                }
            };
        }
        else {
            throw new Error("Peer connection is null!");
        }
    }

    async stop() {
        if (this.peerConnection.current !== null) {
            this.peerConnection.current.close();
            this.peerConnection.current = null;
            console.log("Peer connection closed.");
        }

        if (this.dataChannel.current != null) {
            this.dataChannel.current.close();
            this.dataChannel.current = null;
            console.log("Data channel closed.");
        }

        if (this.localMediaStream.current != null) {
            this.localMediaStream.current.getTracks().forEach(track => track.stop());
            this.localMediaStream.current = null;
            console.log("Local media tracks stopped.");
        }

        if (this.remoteAudioRef.current != null) {
            const remoteStream = this.remoteAudioRef.current.srcObject as MediaStream;
            if (remoteStream) {
                remoteStream.getTracks().forEach(track => track.stop());
            }
            this.remoteAudioRef.current = null;
            console.log("Remote media tracks stopped.");
        }
    }
}

this.dataChannel.current.onmessage is never fired, and thus, console.log inside it never prints.
Thanks

Additional information

Here is some key information in chrome://webrtc-internals:

http://localhost:3000/, { iceServers: [], iceTransportPolicy: all, bundlePolicy: balanced, rtcpMuxPolicy: require, iceCandidatePoolSize: 0 },
ICE connection state: new => checking => connected
Connection state: new => connecting => connected
Signaling state: new => have-local-offer => stable

Example

No response