Trying to reach that instance of effect inside React code

Outline.jsx

import { OutlineEffect } from 'postprocessing'
import { forwardRef, useMemo, useImperativeHandle } from 'react'
import { useThree } from 'react-three-fiber'

const Outline = forwardRef((props: OutlineEffect, ref) => {
  const { scene, camera } = useThree()

  const effect = useMemo(() => new OutlineEffect(scene, camera, props), [props])
  useImperativeHandle(ref, () => effect, [effect])
  return null
})

export default Outline

OutlineDemo.jsx

import React, { useState, Suspense, useEffect, useRef } from 'react'
import { Canvas, useFrame } from 'react-three-fiber'
import { EffectComposer, Outline } from '../../dist/esm'

const OutlineDemo = () => {
  const [selection, select] = useState()

  const ref = useRef()

  useEffect(() => {
    console.log(ref)

    ref.current?.selection.set(selection)
  }, [selection])

      return (
        <Canvas>
          <mesh onClick={(e) => select(e)}>
            <coneGeometry args={[1, 3]} attach="geometry" />
            <meshPhongMaterial color="blue" attach="material" />
          </mesh>
          <Suspense fallback={null}>
            <EffectComposer>
              { /* undefined */ }
              <Outline ref={ref} />
            </EffectComposer>
          </Suspense>
        </Canvas>
  )
}