Websocket failed when first time rendering - React

Question

new WebSocket() is failing when I firest render the application, but when I refresh the page it reconnects and works properly

error -> WebSocket connection to 'ws://localhost:3001/?editorId=a3tq1&testId=noTestIdGiven' failed:

Adding this for more information https://github.com/sanity-io/sanity/blob/next/packages/%40sanity/portable-text-editor/test/ws-server/index.ts

  const webSocket = useMemo(() => {
    console.log(editorId, incomingPatches$, testId)
    const socket = new WebSocket(
      `{ws://${window.location.hostname}:3001/?editorId=${editorId}&testId=${testId}`
    );

    socket.addEventListener('open', () => {
      socket.send(JSON.stringify({type: 'hello', editorId, testId}))
    })
    socket.addEventListener('message', (message) => {
      if (message.data && typeof message.data === 'string') {
        const data = JSON.parse(message.data)
        if (data.testId === testId) {
          switch (data.type) {
            case 'value':
              setValue(data.value)
              setRevId(data.revId)
              onChange(data.value)
              break
            case 'selection':
              if (data.editorId === editorId && data.testId === testId) {
                setSelection(data.selection)
              }
              break
            case 'mutation':
              if (data.editorId !== editorId && data.testId === testId) {
                data.patches.map((patch: Patch) => incomingPatches$.next(patch))
              }
              break
            default:
            // Nothing
          }
        }
      }
    })
    return socket   }, [editorId, incomingPatches$, testId])

  const handleMutation = useCallback(
    (patches: Patch[]) => {
      console.log('webSocket >>', webSocket)
      if (webSocket) {
        webSocket.send(JSON.stringify({type: 'mutation', patches, editorId, testId}))
      }
    },
    [editorId, testId, webSocket]   )