cyclic object value error in Scanline when using useRef #333

I wanted to do animated scanlines, so I created this component

  const AnimatedScanline = () => {
  const ref = useRef<ScanlineEffect>(null!)
  useFrame(({ clock }) => {
    const elapsed = clock.getElapsedTime()
    if (ref.current) {
      ref.current.density = 2.25 + Math.sin(elapsed) * 0.5
    }
  })
  return (
    <Scanline
      ref={ref}
      blendFunction={BlendFunction.COLOR_DODGE}
      density={2.25}
    />
  )
}

Which does exactly what it's supposed to, unless I click the canvas, at which point the app crashes and throws errors to my log, but without the ref and useFrame part, it works without any issues.

Uncaught TypeError: cyclic object value
P util.tsx:38
frame react-reconciler.development.js:14492
renderWithHooks react-reconciler.development.js:3914
updateFunctionComponent react-reconciler.development.js:6059
beginWork react-reconciler.development.js:7632
runWithFiberInDEV react-reconciler.development.js:522
performUnitOfWork react-reconciler.development.js:12641
workLoopSync react-reconciler.development.js:12461
renderRootSync react-reconciler.development.js:12441
performWorkOnRoot react-reconciler.development.js:11960
performSyncWorkOnRoot react-reconciler.development.js:2152
flushSyncWorkAcrossRoots_impl react-reconciler.development.js:2013
processRootScheduleInMicrotask react-reconciler.development.js:2047
performWorkUntilDeadline scheduler.development.js:44
js scheduler.development.js:219
js scheduler.development.js:364
__require chunk-EWTE5DHJ.js:12
js index.js:6
__require chunk-EWTE5DHJ.js:12
React 2
__require chunk-EWTE5DHJ.js:12
js React
__require chunk-EWTE5DHJ.js:12
react-dom_client.js:17615
2 util.tsx:38:6
An error occurred in the component.

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://react.dev/link/error-boundaries to learn more about error boundaries.
Component Stack:
CanvasImpl react-three-fiber.esm.js:14
m index.tsx:83
Canvas unknown:0
div unknown:0
NetworkApp unknown:0
div unknown:0
div unknown:0
DraggableCore DraggableCore.js:75
Draggable Draggable.js:85
DragableWindow index.tsx:13
Windows Desktop.tsx:27
div unknown:0
Desktop unknown:0
App App.tsx:17
:1:145535
WebGL context was lost. three.module.js:15143:30
THREE.WebGLRenderer: Context Lost.