Socket.emit() and socket.on() not working when app is refreshed?

// frontend
useEffect(() => {
    const token = localStorage.getItem("token");
    const data = jwtDecode(token);
    setMyData(data);
    mydataRef.current = data;
    if (!socket.connected) {
      socket.connect();
    }
    console.log("data id", data.id);
    socket.emit("login", data.id);
    console.log("socket emitted");
  }, []);

// backend
io.on("connection", (socket) => {
  console.log("A user connected:", socket.id);
  // Listen for message send requests
  socket.on("login", async (userId) => {
    console.log(`Received login event for userId: ${userId}`);
    const groups = await allGroups(userId);
    users[userId] = socket.id;
    console.log("all users connected", users);
    groups.forEach((group) => {
      socket.join(group.id);
      console.log(`User ${userId} joined room: ${group.id}`);
    });
    const data = await updateUserOnline(userId, true);
    socket.broadcast.emit("receiveOnline", data);
  });