The ontrack listener is not fired when a track is supposedly added although a connection has already been established between 2 peers over WebRTC.
front

import { connectSocket, socket } from '@/utils/socket';
import { useEffect, useRef } from 'react';

const VideoCall = ({ state, to }) => {
  const localVideo = useRef();
  const remoteVideo = useRef();

  const callUser = async (pc) => {
    const offer = await pc.createOffer();

    await pc.setLocalDescription(new RTCSessionDescription(offer));

    socket.emit('call_user', {
      offer,
      to,
      from: window.localStorage.getItem("user_id")
    });
  };

  useEffect(() => {
    if (!socket) {
      connectSocket(window.localStorage.getItem('user_id'));
    }
  });

  useEffect(() => {
    const pc = new RTCPeerConnection();

    if (state === 'offer') {
      callUser(pc);
    }

    socket.on('call_made', async (data) => {
      await pc.setRemoteDescription(new RTCSessionDescription(data.offer));

      const answer = await pc.createAnswer();

      await pc.setLocalDescription(new RTCSessionDescription(answer));

      socket.emit('make_answer', {
        answer,
        to: data.to,
      });
    });

    socket.on('answer_made', async (data) => {
      await pc.setRemoteDescription(new RTCSessionDescription(data.answer));
    });    

    navigator.mediaDevices
      .getUserMedia({ audio: true, video: true })
      .then((stream) => {
        localVideo.current.srcObject = stream;

        stream.getTracks().forEach((track) => {pc.addTrack(track, stream)});
      });

      pc.ontrack = e=>{
        console.log(e);
        remoteVideo.current.srcObject = e.streams[0];
        return false
  
      }

  }, [state]);

  return (
    <div className="fixed bg-lightGray dark:bg-primary z-50 w-full h-full top-2/4 left-2/4 -translate-x-2/4 -translate-y-2/4">
      <div className="w-full h-screen flex flex-col md:flex-row justify-center items-center bg-pink">
        <video ref={localVideo} autoPlay muted />
        <video ref={remoteVideo} autoPlay />
      </div>
    </div>
  );
};

export default VideoCall;

server

const { Server } = require('socket.io');
const http = require('http');

const server = http.createServer(app);

const io = new Server(server, {
  cors: {
    origin: '*',
    methods: ['GET', 'POST'],
  },
});

const port = process.env.PORT || 8000;

server.listen(port, () => {
  console.log(`server is running on port ${port}`);
});

io.use(function (socket, next) {
  if (socket.handshake.query.user_id && socket.handshake.query.token) {
    jwt.verify(
      socket.handshake.query.token,
      process.env.JWT_SECRET,
      function (err, decoded) {
        if (err) return next(new Error('Authentication error'));

        if (decoded.userId !== socket.handshake.query.user_id)
          return next(new Error('Authentication error'));

        next();
      }
    );
  } else {
    next(new Error('Authentication error'));
  }
}).on('connection', async (socket) => {
  const user_id = socket.handshake.query['user_id'];
  const socket_id = socket.id;
  
    socket.on("start_call", async(data)=>{
      const user = await User.findById(data.to);

      if(user){
        io.to(user.socket_id).emit("start_call",{
          from: data.from,
          to: data.to
        })
      }
    })

    socket.on("call_user", async({offer,from, to})=>{
      const user = await User.findById(to);
      if(user){
        io.to(user.socket_id).emit("call_made", {
          offer,
          to: from,
        })
      }
    })

    socket.on("make_answer", async(data)=>{
      const user = await User.findById(data.to);

      if(user){
        socket.to(user.socket_id).emit("answer_made",{
          answer: data.answer,
          
        })
      }
    })
});

On the callee’s side I would expect the conn.ontrack listener be fired, but it seems like nothing happens. I tried following many tutorials and from what I understand this is supposed to work.