React Three - Bloom and Noise Looks Weird

Hello. I am using Nextjs with React Three Fiber. I wanted to add a Bloom effect, so I used @react-three/postprocessing for that, but when I add Bloom to the scene, it doesn’t look good. It doesn’t care about the color of the emission, it is always white and it looks blocky. Kinda like in this example: https://pqrpl.csb.app/ I tried to play with the settings, but I can’t figure out what is the problem.

Screenshot 2021-11-04 203934

The Noise is weird as well. It looks kinda good, but then I set the Blending to THREE.AdditiveBlending and it looks glitchy anytime I scroll.

My code:

const Three = () => {

  return (
    <Canvas>
      {/**@ts-ignore */}
      <color attach="background" args={[0, 0, 0]} />
      <Suspense fallback={null}>
        <ambientLight />
        <mesh position={[2, -3, 0]} scale={0.6}>
          <sphereBufferGeometry attach="geometry" />
          {/**@ts-ignore */}
          <meshStandardMaterial
            attach="material"
            color="#571bff"
            emissive="#571bff"
            emissiveIntensity={200}
          />
        </mesh>
      </Suspense>
      <EffectComposer>
        <Bloom
          luminanceThreshold={0}
          luminanceSmoothing={0.9}
          height={400}
          opacity={3}
        ></Bloom>
        <Noise opacity={0.01} blendFunction={THREE.AdditiveBlending} />
      </EffectComposer>
    </Canvas>
  );
};

export default Three;

I would be very grateful if any of you could help me solve at least one of these issues.

it might be the size which is the size of the renderbuffer. 400 is quite small (but also quite fast). you can look into the varunesc/postprocessing documentation, react-postpro is just a light wrapper around his library. this example looks OK to me Reflectorplanes and bloom - CodeSandbox