I have a hook useWorker which manages a worker. Inside of it i would like to declare something like:

const foo = useRef(new Float32Array(myBufferRef.current))

However, this runs fine once, then an effect runs that posts a message with foo.current.buffer as a transferable object, and then i get:

useWorker.tsx:146 Uncaught TypeError: Cannot perform Construct on a detached ArrayBuffer

It's basically complaining about this useRef (but it fails at useState).

How could i instantiate an ArrayBuffer a Float32Array using it, on a component mount and transfer it to the worker and back during the component's lifetime?