Cel Shading in react three fiber?

Question

Trying to implement a cel shaded model in my project. And found this example in three js docs

The source code for the same is available here. However, I am confused as to how I can apply the imported OutlineEffect to the canvas I am returning.

        <Canvas sRGB shadowMap camera={{ fov: 75 }}>
            <OutlineEffect ref = { renderer } />
            <ambientLight intensity={0.2} />
            <pointLight position={[10, 10, 10]} />
            <pointLight position={[-10, -10, -10]} intensity={0.5} />
... directional light ...
            <Suspense fallback={null}>
                <Logo position = {[0, 0, 0]} />
            </Suspense>
            <mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, -2.3, 0]} receiveShadow>
                <planeBufferGeometry attach="geometry" args={[10, 10]} />
                <shadowMaterial attach="material" transparent opacity={0.5}/>
            </mesh>
        </Canvas>

The toon shader is implemented for the Logo object,

        <mesh
            {...props}
            ref={group}
            castShadow
            dispose={null}
            geometry = {nodes.Curve001.geometry}
            scale = {active ? [46, 46, 46] : [42, 42, 42]}
            rotation={[Math.PI / 2, 0, 0]}
            onClick = {(e) => setActive(!active)}
            onPointerOver = {(e) => setHover(true)}
            onPointerOut = {(e) => setHover(false)}
        >
            <meshToonMaterial
                color = {diffuseColor}
                gradientMap = { gradientMap }
            />
        </mesh>

The example uses a THREE.WebGlRenderer() uses that to create an effect using OutlineEffect(renderer) and then uses the effect to render the scene.