Is there a way to pass React state into WebSocket.onmessage? - reactjs

Question

In TypeScript I am trying to read the value of a stateful variable (created with React.useState) from within a WebSocket's onmessage function. The value is only ever read as what it was at the time of onmessage definition (the initial state, {state: 1}).
Foo is created like a React component (<Foo />). Bar is called only once, but the state (myState) can be updated many times. Why isn't WebSocket.onmessage() using the reference passed to it?
I tried changing the type of propState from MyStatefulObject to &MyStatefulObject and executing the Bar function code directly, but it didn't work and Bar is actually quite large, so that is not ideal.
import { useEffect, useState } from 'react';
interface MyStatefulObject {state: number}
interface BarProps {propState: &MyStatefulObject}
const Foo = () => {
const [myState, setMyState] = useState<MyStatefulObject>({state: 1}),
[wsInitialized, setWSInitialized] = useState<boolean>(false);;
useEffect(() => {
if (!wsInitialized) {
Bar({propState: myState});
setWSInitialized(true);
}
})
return (
<TextField
onChange={(e: ChangeEvent<HTMLInputElement>) => {
setMyState({state: +(e.target.value)});
console.log(myState); // prints user input, confirming state change
}}
/>
)
}
const Bar = (p: BarProps) => {
const ws = WebSocket('url');
ws.onopen = () => {
ws.send(/* Initialization Message */);
};
ws.onmessage = (e: MessageEvent) => {
console.log(p.propState.state); // always prints 1
};
}