cyclic object value error in Scanline when using useRef

[TheLogan]

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 <CanvasImpl> 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.

[MaximeHeckel]

This relates to #334 where I posted a workaround (or at least one that worked for me)

ScanLine uses wrapEffect which is a bit broken as of 3.0.4