Actually I am working on a one to many white board application inside it only host can present on canvas other non-host can see the image of that canvas. But in my case a problem arises that when I am using socket.to().emit() to send the imageData to the non-host it is not working but when I use socket.emit() or socket.broadcast.emit() it is working but they are disobeying the concept of break rooms.

Here I am attaching the code for server.js

const express = require('express');
const app = express();
const server = require('http').createServer(app);
const { Server } = require('socket.io');

const io = new Server(server);
const port = 5000;

// Middleware to handle CORS
const cors = require('cors');

app.use(cors());

// Routes
app.get('/', (req, res) => {
    res.send("This is MERN Realtime Board Sharing App Official Server by FullyWorld Web Tutorials");
});

var imageDataGlobal = "", roomIdGlobal = "";
var socketIdCollection = []

io.on('connection', (socket) => {
    console.log('New socket connection:', socket.id);
  
    socket.on("userJoined", async (data) => {
      console.log(`Socket ${socket.id} joined with data:`, data);
      if (data.name === "") {
        socket.emit("userIsJoined", { success: false });
      } else {
        roomIdGlobal = data.roomId;
        await socket.join(data.roomId);
        console.log(`Socket ${socket.id} joined room ${data.roomId}`);
        socket.emit("userIsJoined", { success: true });
        socket.emit("roomJoined", data.roomId);
      }
    });
  
    socket.on("roomJoined", (roomId) => {
      console.log(`Socket ${socket.id} joined room ${roomId}`);
      console.log(`Sockets in room ${roomId}:`, io.sockets.adapter.rooms.get(roomId));
      socket.to(roomIdGlobal).emit("response", imageDataGlobal);
      // socket.broadcast.emit("response", imageDataGlobal)
      console.log(`Emitted imageDataResponse for room ${roomId}`);
    });
  
    socket.on("imageData", (data) => {
      console.log(`Socket ${socket.id} sent new image data`);
      imageDataGlobal = data;
      socket.to(roomIdGlobal).emit("response", imageDataGlobal);
      // socket.broadcast.emit("response", imageDataGlobal)
      console.log(`Emitted imageDataResponse for room ${roomIdGlobal}`);
    });
  
    socket.on("disconnect", () => {
      console.log(`Socket ${socket.id} disconnected`);
    });
  });

server.listen(port, () => {
    console.log("Server is running on http://localhost:5000");
});

and the component where I want to use socket.to().emit() method –

import React, { useEffect, useLayoutEffect, useState } from 'react';
import rough from 'roughjs';

const roughGenerator = rough.generator();

const index = ({ canvasRef, ctxRef, elements, setElements, color, tool, user, socket }) => {
  const [isDrawing, setIsDrawing] = useState(false);
  const [img, setImg] = useState(null);

  useEffect(() => {
    // Connect to the socket server
    socket.connect();

    // Listen for imageDataResponse after connection is established
    console.log("hello")

    socket.on("response", (data) => {
      console.log("Received imageDataResponse:", data);
      setImg(data);
    });

    // console.log(socket)

    console.log(img)

    // Cleanup function to remove event listeners when component unmounts
    return () => {
      socket.off("response");
    };
  }, [socket]);

  if (!user?.presenter) {
    return (
      <div className=' w-4/5 m-auto' style={{
        height: "70vh",
        width: "80%",
        border: "1px solid black",
        overflow: 'hidden'
      }}>
        <img key={img} src={img || ''} alt="Real time image shared by host" />
      </div>
    )
  }


  useEffect(() => {
    const canvas = canvasRef.current;
    canvas.height = window.innerHeight * 2;
    canvas.width = window.innerWidth * 2;
    const ctx = canvas.getContext('2d')
    ctxRef.current = ctx;
  }, [])

  useLayoutEffect(() => {
    const roughCanvas = rough.canvas(canvasRef.current);

    if (elements.length > 0) {

      ctxRef.current.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
      elements.forEach((ele) => {

        if (ele.type === "pencil") {
          roughCanvas.linearPath(ele.path, { stroke: ele.stroke, roughness: 0, strokeWidth: 2 });
        }

        else if (ele.type === "rectangle") {
          roughCanvas.draw(
            roughGenerator.rectangle(ele.offsetX, ele.offsetY, ele.width, ele.height, {
              stroke: ele.stroke,
              strokeWidth: 2
            })
          );
        }

        else if (ele.type === "line") {
          roughCanvas.draw(
            roughGenerator.line(ele.offsetX, ele.offsetY, ele.width, ele.height, {
              stroke: ele.stroke,
              strokeWidth: 2
            })
          )
        }

      });
    }

    const canvasImage = canvasRef.current.toDataURL();
    socket.emit("imageData", canvasImage)
    // setImg(canvasImage)
  }, [elements, tool]);


  const handleMouseDown = (e) => {
    const { offsetX, offsetY } = e.nativeEvent
    console.log(offsetX, offsetY);

    if (tool == "pencil") {
      setElements((prevElements) => [
        ...prevElements,
        {
          type: "pencil",
          offsetX,
          offsetY,
          path: [[offsetX, offsetY]],
          stroke: color,
          strokeWidth: 2
        }
      ])
    }

    else if (tool == "rectangle") {
      setElements((prevElements) => [
        ...prevElements,
        {
          type: "rectangle",
          offsetX,
          offsetY,
          width: offsetX,
          height: offsetY,
          stroke: color,
          strokeWidth: 2
        }
      ])
    }

    else if (tool == "line") {
      setElements((prevElements) => [
        ...prevElements,
        {
          type: "line",
          offsetX,
          offsetY,
          width: offsetX,
          height: offsetY,
          stroke: color,
          strokeWidth: 2
        }
      ])
    }

    console.log(elements)
    setIsDrawing(true);
  }

  const handleMouseMove = (e) => {
    const { offsetX, offsetY } = e.nativeEvent;
    if (isDrawing) {
      if (tool === "pencil") {
        setElements((prevElements) =>
          prevElements.map((ele, index) => {
            if (index === elements.length - 1) {
              const newPath = [...ele.path, [offsetX, offsetY]];
              return {
                ...ele,
                path: newPath
              };
            } else {
              return ele;
            }
          })
        );
      }

      else if (tool === "rectangle") {
        setElements((prevElements) =>
          prevElements.map((ele, index) => {
            if (index === elements.length - 1) {
              return {
                ...ele,
                width: offsetX - ele.offsetX,
                height: offsetY - ele.offsetY
              };
            } else {
              return ele;
            }
          })
        );
      }

      else if (tool === 'line') {
        setElements((prevElements) =>
          prevElements.map((ele, index) => {
            if (index === elements.length - 1) {
              return {
                ...ele,
                width: offsetX,
                height: offsetY
              };
            } else {
              return ele;
            }
          })
        );
      }
    }
  };

  const handleMouseUp = (e) => {
    // console.log(e)
    setIsDrawing(false)
  }


  return (
    <div className=' w-4/5 m-auto' style={{
      height: "70vh",
      width: "80%",
      border: "1px solid black",
      overflow: 'hidden'
    }} onMouseDown={handleMouseDown} onMouseUp={handleMouseUp} onMouseMove={handleMouseMove} >
      <canvas ref={canvasRef} />
    </div>
  )
}

export default index

I am expecting that my problem will get resolve