Rendering multiple composers in three.js

In this clip im trying to render two differnt composers to the canvas in the animation cycle but only the last composer in the loop gets rendered to the screen, or the transparency of one layer doesnt work right. Im trying to have multiple layers in my scene with different post processing on each layer. A fullscreen mesh with a shader texture in the background with a geometry layer in the foreground.

 Renderer = new THREE.WebGLRenderer({            canvas,            antialias: true,            powerPreference: "high-performance",            alpha: true,        });        Renderer.setSize(window.innerWidth, window.innerHeight);        ShaderComposer = new EffectComposer(Renderer);        const ShaderRenderPass = new RenderPass(Scene, Camera);        ShaderComposer.addPass(ShaderRenderPass);        GeometryComposer = new EffectComposer(Renderer);        const GeometryRenderPass = new RenderPass(Scene, Camera);        GeometryComposer.addPass(GeometryRenderPass);        const halftonePass = new RenderPixelatedPass(10, Scene, Camera);        ShaderComposer.addPass(halftonePass);        // Animation loop        function animate() {            stats?.update();            requestAnimationFrame(animate);            Camera.layers.set(0);            ShaderComposer.render();            Camera.layers.set(1);             GeometryComposer.render();        }

Ive tried turning the renderer clearing off, ive also tried using a blending pass but I just cant seem to get it working.