Дублирование событий отлавливаемых на клиенте - Socket.io | React.js

Проблема заключается в том что действия которые отлавливаются на клиенте в useEffect дублируются. Я захожу в комнату прилетает лог что зашёл новый юзер, потом выхожу из комнаты (без перезагрузки) и захожу в неё второй раз и теперь получаю 2 лога, они дублируются.

Server:

io.on("connection", (socket) => {
  console.log(`User ${socket.id} CONNECTED`);

  socket.on("joinRoom", (data) => {
    socket.join(data.roomId);
    console.log(`User CONNECTED TO ROOM ${data.roomId}`);
    io.sockets.in(data.roomId).emit("newUser", data);
  });

  socket.on("leaveRoom", (data) => {
    socket.leave(data.roomId);
    console.log(`User LEAVE ROOM ${data.roomId}`);
    // console.log(socket);
  });

  socket.on("sendMessage", (data) => {
    socket.to(data.room).emit("receiveMessage", data);
  });

  socket.on("startTyping", (data) => {
    socket.to(data.roomId).emit("typingResponse", data.typingUserMessage);
  });

  socket.on("stopTyping", (data) => {
    socket.to(data.roomId).emit("typingResponse", data.typingUserMessage);
  });

  socket.on("disconnect", () => {
    console.log(`User ${socket.id} DISCONNECTED`);
    socket.disconnect();
  });
});

Client (Chat.jsx):

const handleDisconnect = () => {
    socket.emit('leaveRoom', { roomId });
    console.log('USER LEFT ROOM');
  };

  useEffect(() => {
    dispatch(getRoomById(roomId));
  }, [dispatch, roomId]);

  useEffect(() => {
    socket.on('newUser', data => {
      console.log('NEW USER CONNECTED', data);
    });

    socket.on('receiveMessage', data => {
      console.log('RECEIVE', data);
      dispatch(addReceivedMessage(data));
    });

    socket.on('typingResponse', data =>
      data === 'stop' ? setTypingResponse('') : setTypingResponse(data)
    );
  }, [dispatch, roomId]);

Может это потому что обработчики накладываются или я не правильно делаю выход из комнаты