React Three Postprocessing - Bloom Looks Blocky - three.js

Question

I am making a project using Next.js, Three.js, #react-three/fiber, and #react-three/postprocessing.
I wanted to create a Bloom effect, but it looks very weird and ugly. It doesn't inherit the mesh material emissive color - it is white, and it looks very blocky and pixelated.
The Noise effect is also weird. It looks OK, until I set the Blending Mode to Additive and then it looks glitchy when scrolling.
This is my code:
import { Canvas } from "#react-three/fiber";
import { Suspense } from "react";
import * as THREE from "three";
import gsap from "gsap";
import { Bloom, EffectComposer, Noise } from "#react-three/postprocessing";
const Three = () => {
return (
<Canvas>
<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 really appreciate any help because I really don't know how to fix this. Thank you very much.