react-postprocessing VS R3F-CRA-Starter

For the post processing I used @react-three/post-processing components, and to get the look just right I created a debug panel using Leva to adjust some values (like bokeh blur).

I'm attempting to implement custom post processing in react three fiber but I do not know how to go about it. I've tried to use these links as reference:https://github.com/pmndrs/react-postprocessing/blob/master/api.mdhttps://github.com/pmndrs/postprocessing/wiki/Custom-Passeshttps://github.com/pmndrs/postprocessing/wiki/Custom-Effects

Hi all I've been fiddling with three.js for some time now! and recently started using react-three-fiber just because it's easy to use and declarative. I was wondering if someone here could help me out creating a custom postprocessing effect for my r3f project. I have the shader code already and I have seen pmndrs' code to extend three.js effect class but I'm unable to implement it with the shader code I have. the link to pmndr's / paul Hanchel's code Here and shader code for lens distortion effect Here or on stack overflow here. please assume I know nothing! thanks in advance!

looks like an active bug when using three r135 and above https://github.com/pmndrs/react-postprocessing/issues/111

React Three Fiber with Drei and Postprocessing