Type 'StoreState | undefined' must have a '[Symbol.iterator]()' method that returns an iterator.

import { createContext, ParentComponent, useContext } from 'solid-js'
import { createStore } from 'solid-js/store'

import { io, ManagerOptions, Socket, SocketOptions } from 'socket.io-client'

/**
 * Store type
 */
type StoreState = [
  { socket: boolean | Socket },
  {
    set?: (
      url: string,
      options: Partial<ManagerOptions & SocketOptions>
    ) => void
  }
]

/**
 * Initial state of the store
 */
const initialState = {
  socket: false
}

/**
 * Context
 */
const SocketIoContext = createContext<StoreState>()

/**
 * Socket provider
 */
export const SocketIoProvider: ParentComponent = (props) => {
  const [state, setState] = createStore<StoreState[0]>(initialState)

  const store: StoreState = [
    state,
    {
      set: (
        url = window._env ? window._env.SOCKET_URL : 'http://localhost/4000',
        options: Partial<ManagerOptions & SocketOptions>
      ) => {
        setState('socket', io(url, options))
      }
    }
  ]

  return (
    <SocketIoContext.Provider value={store}>
      {props.children}
    </SocketIoContext.Provider>
  )
}

const useSocketIo = () => useContext(SocketIoContext)

export default useSocketIo

const Space = () => {
  const [socket, { set }] = useSocketIo()
  return <>{socket}BRUH</>
}