How to handle socket.io authentication errors with nodejs server and reactjs?

We are trying to display an error when the connection has failed during authentication (wrong JWT token).

For that, we have a middleware on the server that verifies the validity of the token and is expected to return an error if the token is invalid :

io.use((socket, next) => 
{
    jwt.verify(socket.handshake?.query?.refreshToken, process.env.REF_JWT_SEC, (err, decoded) =>
    {
        if(decoded?._id && !err) 
        {
            socket.decoded = decoded._id;
            return next();
        }
        else
        {
            let err = new Error('authentication_error')
            err.data = { content : 'refreshToken error!' };
            return next(err);
        }
    });
});

On the client we have multiple socket.on() instances :

const refreshToken = localStorage.getItem('refresh_token');
const socket = io(
  "http://localhost:4000",
  {
    query: { refreshToken },
  },
);
...
export const Chat = () => {
  ...
  useEffect(() => {
    socket.on("connect_error", err => {
      console.log(err); // <-- error we're trying to log
    });

    socket.on("error", err => {
      console.log(err); // <-- error we're trying to log
    });

    socket.on("message", ({id, text, sender}) => {
      console.log('# socket io res :', id, text, sender)
    })

    return () => {
      socket.disconnect()
    }
  }, []);
  ...
}

While trying to trigger the error by sending an incorrect token ("ThisIsSomeIncorrectToken"), as expected, sending/recieving messages doesn't work. However, no error is being logged.

In the client's console we can see the requests to socket.io:

Note that somehow the error shows up in the client logs when I save my reactjs code, but not if I refresh completely the browser or re-render the component.