Hey guys! I've been facing a weird issue and im not sure whats the cause
i have a page /chat which is a server component. In this page, i render a client component called ChatUI

chat/page.tsx looks like this:

import { redirect } from "next/navigation"
import ChatUI from "../components/ChatUI"
import { v4 } from 'uuid'

export default async function ChatPage({ searchParams }: { searchParams: Promise<{ username?: string, topic?: string }> }) {
    const params = await searchParams
    if (!params.topic || !params.username) {
        redirect("/") 
    }

    return (
        <ChatUI username={params.username} topic={params.topic} uid={v4()} />
    )
}

In my ChatUI component:

"use client"

import React, { useEffect } from 'react'
import { WS_URL } from '../constants'

export default function ChatUI({ topic, username, uid }: { topic: string, username: string, uid: string }) {

    useEffect(() => {
        const ws = new WebSocket(encodeURI(`${WS_URL}/?topic=${topic}&username=${username}&uid=${uid}`))

        return () => {
            ws.close(1001, "client left")
        }
    }, [topic, username, uid])

    return (
        <div className='bg-primary'>
            ...JSX
        </div>

    )
}

When i navigate away from /chat i get this error:

InvalidAccessError: A parameter or an operation is not supported by the underlying object

I'm unsure why this is happening. When i use the same setup but on a route which is completly a client component, it works fine