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

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)
});
})