Why is my React Websocket stuck on connecting until component renders?

In my React component, I have a Websocket that is stuck in a connecting state until my component renders. The code looks as follows:

function MyComponent() {
    const [websocket, setWebsocket] = useState(null);

    useEffect(() => {
        const newWebsocket = new WebSocket(ENDPOINT);
        newWebsocket.onopen = () => console.log('hello there!');
        setWebsocket(newWebsocket);
    }, []);

    useEffect(() => {
        console.log(`readState: ${ws?.readyState}`);
    }, [ws?.readyState]};

    const onRender = useCallback(() => {
        if (websocket === null) {
            return;
        }
        websocket.onmessage = () => console.log('received a message!');
    }, [websocket]);

    return (
        (websocket !== null) 
            ? <ChildComponent onRender={onRender} />
            : <div> No Websocket </div>
    );
}

hello there! prints, which shows the WebSocket connection is open, but the useEffect logging readyState only prints CONNECTING.

Does websocket.onmessage have to be defined before the websocket can transition from connecting to open? Or is there some other issue going on?

I expect the websocket to transition from connecting to open without needing ChildComponent to first render. However, what happens now is that I need to define something like

return (
    (websocket?.readyState === WebSocket.CONNECTING || websocket?.readyState === WebSocket.OPEN)
        ? <ChildComponent onRender={onRender} />
        : <div> No WebSocket </div>
);

for the websocket to go from connecting to open. What I'd like to do is define something like this

return (
    (websocket?.readyState === WebSocket.OPEN)
        ? <ChildComponent onRender={onRender} />
        : <div> No WebSocket </div>
);

This doesn't work because updates to websocket.readyState will not trigger a re-render. While updates to the state variable websocket will trigger an update, updates of the properties of websocket will not. If you want the screen to update, you can do something like this:

function MyComponent() {
    const [websocket, setWebsocket] = useState(null);
    const [readyState, setReadyState] = useState(WebSocket.CLOSED);

    useEffect(() => {
        const newWebsocket = new WebSocket(ENDPOINT);
        setReadyState(WebSocket.CONNECTING);
        newWebsocket.onopen = () => setReadyState(WebSocket.OPEN);
        newWebsocket.onclose = () => setReadyState(WebSocket.CLOSED);
        setWebsocket(newWebsocket);
    }, []);

    useEffect(() => {
        console.log(`readyState: ${readyState}`);
    }, [readyState]};

    const onRender = useCallback(() => {
        if (websocket === null) {
            return;
        }
        websocket.onmessage = () => console.log('received a message!');
    }, [websocket]);

    return (
        (readyState === WebSocket.OPEN) 
            ? <ChildComponent onRender={onRender} />
            : <div> No Websocket </div>
    );
}