Sparkle Transparency issue with other effects in EffectComposer

Hi all,
I’m experiencing black borders around the particles from R3F drei’s Sparkle component, as soon as I add other effects with an EffectComposer (like Bloom, Vignette, Noise etc.). Any idea how to prevent this?

I’m assuming it has to do with the render order of transparent objects, but I can’t figure out how to solve this.

If I create my own particle system and shaderMaterial with a PNG pointTexture, I don’t get these issues.

uniforms = {
  pointTexture: {
    value: new THREE.TextureLoader().load('./img/spark1.png')

const sparkleMaterial = new THREE.ShaderMaterial({
  uniforms: uniforms,
  vertexShader: `attribute float size;
  varying vec3 vColor;
  void main() {
    vColor = color;
    vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
    gl_PointSize = size * (100.0 / -mvPosition.z );
    gl_Position = projectionMatrix * mvPosition;

  fragmentShader: `uniform sampler2D pointTexture;
  varying vec3 vColor;
  void main() {
    gl_FragColor = vec4( vColor, 1.0 );
    gl_FragColor = gl_FragColor * texture2D( pointTexture, gl_PointCoord );

  blending: THREE.AdditiveBlending,
  depthTest: true,
  transparent: true,
  alphaTest: 0.5,
  vertexColors: true

Here’s the R3F drei fragment shader code for their sparkles

    `varying vec3 vColor;
    varying float vOpacity;
    void main() {
      float distanceToCenter = distance(gl_PointCoord, vec2(0.5));
      float strength = 0.05 / distanceToCenter - 0.1;
      gl_FragColor = vec4(vColor, 1 * vOpacity);

I’d appreciate any help on this!