Websocket failed when first time rendering - React - reactjs

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] )