I'm new to Socket i try to receive image from server using socket-client-io . i can able to get image but on server side it shows multiple user created but i'm only seeing it in one tab but it shows like 10 users connected(like that)

Code:

const socket = io('ws://localhost:5000')
    socket.on('connnection', () => {
      console.log('connected to server');
    })
 socket.on('disconnect', () => {
      console.log('Socket disconnecting');

    })

    useEffect(() => {
      const handler = (message) => {
        setImage(message.image);
        console.log(message);
      };
      socket.on("send_image", handler);
      return () => socket.off("send_image", handler); // assuming `.off` deregisters a callback
    }, []);

it works fine and i can get images but it create multiple connection for single tab kindly guide me how to avoid this