When I click the connect button on my webpage, I get an error that I am using useEffect wrong. I have never used React before and neither has my company. My boss is worried about multiple of the same ports being produced and that is why we want to use useEffect, so we can hopefully prevent that problem and keep the connection until it is disconnected. Here is my code. Is the problem using useEffect on a click? What can I do to ensure my connection will stay and there will not be duplicate ports being made at once?
url is hardcoded previously to be the url we need.

`function WebSocketComponent(){
    useEffect(() => {
        const socket= new WebSocket(url);

        socket.onopen = function(event) {
            console.log("connected");
        
        const connectButton = document.getElementById("Connect");
        connectButton.disabled=true;

        const disconnectButton = document.getElementById("Disconnect");
        disconnectButton.disabled=false;

        const sendButton = document.getElementById("load");
        sendButton.disabled=false;
        }

        socket.onmessage = (event) => {
             
        };
   
        return () => {
          socket.close();
        };
    }, [])
}`

Is there a way to do this?