socket.io missing events in useEffect after rerendering

I am making a zoom clone with React, socket.io and express kurento. The thing is I put the listeners to all server socket event in my App component like that:

//App.js


   React.useEffect(() => {
    socket.on(CLIENT.GET_NEW_USER, onGettingUser);
    socket.on(CLIENT.GET_EXISTING_PARTICIPANTS, onGettingParticipants);
    socket.on(CLIENT.RECEIVE_VIDEO_ANSWER, onReceiveVideoAnswer);
    socket.on(CLIENT.RECEIVE_SERVER_CANDIDATE, (userId, candidate) => {});
  }, [onGettingParticipants, onGettingUser, onReceiveVideoAnswer, socket]);

In Short:

When host creates a room in Admin Page (inside App component), client-socket emits it to server and get back the roomId in callback, then it gets update in context to use the roomId globally.

The problem is:

When the roomId context gets update, it triggers useEffect again making socket to listen and handle servers event without roomId, and some of the handlers need roomId, which is empty at the time so I get the errors.

What I tried:

• Updating useEffect with this check: if (roomId.length === 0) return in the first line to prevent it from trigger, but then socket misses all the events and doesn't handle at all.
• Putting these handle event in child component, but I still got the same error.

What I want to achieve:

Please help me to resolve the problem or just kindly show me the pattern that work best when it comes to socket.io, react and kurento.