Three js converting an equirectangular panorama to cubemap format using NEXT JS

Question

I am trying to convert an equirectangular panorama image to cubemap format using NEXT JS. The scene get rendered but the background doesn't apply. And I get no errors!

import { useLoader, useThree } from "@react-three/fiber";
import * as THREE from "three";

const Background = (props) => {
    const texture = useLoader(THREE.TextureLoader, "/autoshop.jpg");

    const { gl } = useThree();

    const formatted = new THREE.WebGLCubeRenderTarget(
        texture.image.height
    ).fromEquirectangularTexture(gl, texture);

    console.log("formatted", formatted);

    return <primitive attach="background" object={formatted} />;
};

export default Background;

And I call it wrapped by Suspense:

<Suspense fallback={null}>
    <Background />
</Suspense>

Answer 1

Thanks to @Marquizzo comment. I found out that I can do the same thing in another way. By replacing:

const formatted = new THREE.WebGLCubeRenderTarget(
    texture.image.height
).fromEquirectangularTexture(gl, texture);

by:

texture.encoding = THREE.sRGBEncoding;
texture.mapping = THREE.EquirectangularReflectionMapping;