useEffect(() => {
    const newClient = new Client({
      brokerURL: `wss://${import.meta.env.VITE_SOCKET_URL}`,
      connectHeaders: {
        Authorization: token,
      },
      debug: function (str) {
        console.log("STOMP: " + str);
      },
      reconnectDelay: 5000,
      heartbeatIncoming: 4000,
      heartbeatOutgoing: 4000,
    });

    newClient.onConnect = function (frame) {
      setConnectionStatus("CONNECTED");
      console.log("Connected: " + frame);

      newClient.subscribe(`/topic/bidder-count/${id}`, function (message) {
        console.log("Received: " + message.body);
        setMessages((prevMessages) => [
          ...prevMessages,
          JSON.parse(message.body),
        ]);
      });
    };

    newClient.onStompError = function (frame) {
      setConnectionStatus("ERROR");
      console.log("Broker reported error: " + frame.headers["message"]);
      console.log("Additional details: " + frame.body);
    };

    newClient.onWebSocketClose = function () {
      setConnectionStatus("CLOSED");
      console.log("WebSocket Connection Closed");
    };

    newClient.onDisconnect = function () {
      setConnectionStatus("DISCONNECTED");
      console.log("Stomp Disconnected");
    };

    console.log("Attempting to connect to WebSocket...");
    newClient.activate();
    setClient(newClient);

    return () => {
      console.log("Deactivating WebSocket connection...");
      if (newClient) {
        newClient.deactivate();
      }
    };
  }, [id, token]);