How to connect peers using simple-peer with React and Node.js?

Question

I am trying to make a video call on my project and I am using simple-peer to connect 2 peers. I can see all of console.log on Node.js but can get console.log(4) on React. I am not fully understood to WebRTC yet so please understand my broken codes...

This is my code with React.

  const myVideo = useRef();
  const userVideo = useRef();
  const connectionRef = useRef();
  const roomName = "123";
  const [stream, setStream] = useState();
  let creator = false;

  useEffect(() => {
    const socket = io("url");
    socket.emit("joinRoom", roomName);

    socket.on("created", () => {
      creator = true;

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

    socket.on("joined", () => {
      navigator.mediaDevices
        .getUserMedia({ video: true, audio: true })
        .then((stream) => {
          setStream(stream);
          userVideo.current.srcObject = stream;
        });

      socket.emit("ready", roomName);
    });

    socket.on("ready", () => {
      if (creator) {
        const peer = new Peer({ initiator: true, trickle: false, stream });

        peer.on("signal", (signal) => {
          socket.emit("sendingSignal", {
            signal,
            roomName,
          });
        });

        peer.on("stream", (stream) => {
          userVideo.current.srcObject = stream;
        });

        socket.on("receivingSignal", (signal) => {
          peer.signal(signal);
        });

        connectionRef.current = peer;
      }
    });

    socket.on("offer", (incomingSignal) => {
      console.log(incomingSignal);
      if (!creator) {
        const peer = new Peer({ initiator: false, trickle: false, stream });
        console.log(peer);
        console.log(1);
        peer.on("signal", (signal) => {
          socket.emit("returningSignal", { signal, roomName });
          console.log(2);
        });
        console.log(3);
        peer.on("stream", (stream) => {
          userVideo.current.srcObject = stream;
          console.log(4);
        });
        console.log(5);
        peer.signal(incomingSignal);
        console.log(6);

        connectionRef.current = peer;
      }
    });
  }, []);

And this is my code with Node.js.

io.on(“connection”, (socket) => {
    console.log(1)
    socket.on(‘joinRoom’, (roomName)=>{
        let rooms = io.sockets.adapter.rooms;
        let room = rooms.get(roomName);
        console.log(2)
        if (room == undefined) {
            console.log(2.1)
            socket.join(roomName);
            socket.emit(“created”);
            console.log(2.2)
          } else if (room?.size == 1) {
              console.log(2.3)
            socket.join(roomName);
            socket.emit(“joined”);
            console.log(2.4)
          } else {
            socket.emit(“full”);
            console.log(2.5)
          }
        });
    socket.on(“ready”, function (roomName) {
        socket.broadcast.to(roomName).emit(“ready”);
      });
    socket.on(‘sendingSignal’,({signal, roomName})=>{
        console.log(3)
        console.log({signal,roomName})
        io.to(roomName).emit(“offer”,signal)
        console.log(3.5)
      })
    socket.on(“returningSignal”, ({ signal, roomName }) => {
        console.log({signal, roomName})
        console.log(4)
        io.to(roomName).emit(“receivingSignal”, signal)
        console.log(4.5)
    });
})