Uncaught TypeError: Illegal invocation

Describe the bug
It produces Uncaught TypeError: Illegal invocation error when calling io()

context: I'm working in a react project where valtio is used for state manamement.

To Reproduce

Socket.IO server version: 4.8.1

Server

Using Nest.js for server. The server is working fine.

Socket.IO client version: 4.8.1

Client

// (next.js projec) the valtio store
'use client';
import {proxy, ref} from "valtio";
import {devtools, useProxy} from "valtio/utils";
import {IS_PRODUCTION_MODE, isServer} from "@/util/constants";
import {io, Socket} from "socket.io-client";
import {endpoints} from "@/util/urls";

type MsgModule<Actions = any> = {
  socket: Socket;
  connecting: boolean;
  actions: Actions
}

type Data = {
  message: MsgModule;
}
export const socketStore = proxy<Data>({
  message: {
    socket: io(endpoints.api.baseUrl + '/message', {
      auth: {
        token: ''
      },
      autoConnect: false
    }),
    connecting: false,
    actions: ref({
      abc: () => {}
    }),
  },
});

// socketStore.message.

export const useStoreSockMsg = () => useProxy(socketStore.message);

devtools(socketStore, {
  name: 'socket',
  enabled: !isServer && !IS_PRODUCTION_MODE,
});

export const socketActions = {
  connectMessageSocket(accessToken: string) {
    if (socketStore.message.socket.connected || socketStore.message.connecting) return;

    console.log('proceed to socket connection with token', accessToken)

    socketStore.message.socket = io(
      endpoints.api.baseUrl + '/message',
      {
        auth: {
          token: accessToken,
        },
        autoConnect: false,
      }
    );

    // Listen for connection events
    socketStore.message.socket.on('connect', () => {
      console.log('socket is connected')
    });

    socketStore.message.socket.on('disconnect', () => {
      console.log('socket is disconnected')
    });

    // Handle auth errors (e.g., expired token)
    socketStore.message.socket.on('connect_error', async (err) => {
      console.log('socket connection err: ', err.message)

      // if (err.message === 'Unauthorized') {
      //   retry connection with updated token ...
      // }
    });


    socketStore.message.socket.connect();
  },

  // Disconnect and cleanup
  disconnectSocket: () => {
    if (socketStore.message.socket) {
      socketStore.message.socket.disconnect();
    }
  },

};

// the component
function MessageSocket() {
  const userStore = useStoreUser();
  const sockStore = useStoreSockMsg();

  useEffect(() => {
    if (sockStore.socket.connected || !userStore.at) return; // at is access token
    socketActions.connectMessageSocket(userStore.at); // calling this producting the err: Uncaught TypeError: Illegal invocation

    return () => socketActions.disconnectSocket();
  }, [userStore.at, sockStore.socket.connected]);

  useEffect(() => {
    console.log('sock connected?', sockStore.socket.connected)
  }, [sockStore.socket.connected]);

  // ...
}

Expected behavior
Obviously expectation was to successfully connect, The official docs has a guide on how to use with react but that doesn't covers how to use with authentication when the token becomes available later.

Platform:

• Device: A Desktop PC
• OS: Ubuntu 24.04

Start with the io() calls and connectMessageSocket entry point in the provided Next.js client reproduction, then isolate whether wrapping the Socket instance in the Valtio proxy causes the invocation error. Reproduce the authenticated connection flow with the token initially unavailable and verify that it connects successfully once the token is supplied.