How to use custom post progressing shader pass in react-three-fiber?

Question

I am using react-three.

I created a custom post progressing shader for my three js project.

The below code is worked in typical html and js file.

const CustomShader = {

    uniforms: {
        'tDiffuse': { value: null },
    },

    vertexShader: /* glsl */`
        varying vec2 vUv;
        void main() {
            vUv = uv;
            gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
        }`,

    fragmentShader: /* glsl */`

        uniform sampler2D tDiffuse;
        varying vec2 vUv;

        void main() {
//my glsl code...
            vec4 finalRGBA = texture2D(tDiffuse, vUv);
            gl_FragColor = finalRGBA;
        }`

};
export { CustomShader };

const composer = new EffectComposer(renderer);
composer.addPass(new RenderPass(scene, camera));
const customPass = new ShaderPass(CustomShader);
composer.addPass(customPass);

Now, I am going to using the upper shader pass in react-three-fiber. I cant use 'useRef' or 'useEffect' to input my shader into the 'effectscomposer'.

How to achieve?