I got an error for connecting WebSocket but i cant fix it, what is my codes problem? When my page loads, I try to send a message, (also i wait a few seconds) but it's not working.

i used this method webSocket.current.readyState === WebSocket.OPEN but doesn't answered!!

My code:

export default function ChatRoom() {

  const [input, setInput] = useState("");
  const handleChange = (e) => setInput(e.target.value);

  const handleOnEnter = (e) => {
    if (e.charCode === 13 || e.which === 13) {
      sendMessage();
      setInput("");
    }
  };

  const webSocket = useRef(null);
  const [chatMessages, setChatMessages] = useState([]);

  useEffect(() => {
    console.log("Opening WebSocket");
    webSocket.current = new WebSocket("ws://localhost:3000");
    const openWebSocket = () => {
      webSocket.current.onopen = (event) => {
        console.log("Open:", event);
      };
      webSocket.current.onclose = (event) => {
        console.log("Close:", event);
      };
    };
    openWebSocket();
    return () => {
      console.log("Closing WebSocket");
      webSocket.current.close();
    };
  }, []);

  useEffect(() => {
    webSocket.current.onmessage = (event) => {
      const chatMessageDto = JSON.parse(event.data);
      console.log("Message:", chatMessageDto);
      setChatMessages([
        ...chatMessages,
        {
          content: input,
        },
      ]);
    };
  }, [chatMessages]);

  const sendMessage = () => {
    console.log("WebSocket.OPEN === ", WebSocket.OPEN);
    console.log("webSocket.current.readyState === ", webSocket.current.readyState);
    if (webSocket.current.readyState === WebSocket.OPEN) {
      console.log("Send!");
      webSocket.current.send(
        JSON.stringify({
          content: input,
        })
      );
    } else if (webSocket.current.readyState === WebSocket.CONNECTING) {
      webSocket.current.addEventListener("open", () => sendMessage());
    }
  };

  return (
    <div className={styles.chatWrapper}>
      </div>
          <div>
            {chatMessages.map((item) => (
              <div>{item.content}</div>
            ))}
          </div>
        
      )}
      <div>
        <input
          value={input}
          placeholder={"type message ..."}
          onChange={(e) => handleChange(e)}
          onKeyPress={handleOnEnter}
        />
      </div>
    </div>
  );
}

my console :

WebSocket.OPEN ===  1
webSocket.current.readyState ===  0