Error when trying to import postprocessing in react three fiber

Hello, today I was just trying to add bloom to my project therefore importing @react-three/postprocessing package into the scene. But then this error popped up

I am really not sure what is happening here are all the packages and versions that I have been using


I have all the latest packages and here are my import statements in App.jsx

import { OrbitControls, Sphere } from "@react-three/drei"
import { CustomStars } from "./components/CustomStars"
import { CustomWater } from './components/CustomWater';
import { TJelly } from "./components/tJelly";
import { Suspense } from "react"
import { Gradient, LayerMaterial } from "lamina";
import * as THREE from "three";
import { EffectComposer, Bloom } from "@react-three/postprocessing";

You may be loading outdated versions. WebGLMultipleRenderTargets is old.
Can you update all your drei/postprocessing to latest?

I just updated all the packages but still have no luck

Just so your wondering, I got it working after downgrading react to 18 and three fiber to 0.171! There were some issues with these packages.