Why are Three.js equirectangular backgrounds's colors/contrast so bad and how can I fix them?

Question

I'm using Three.js in a website project for a construction company. They want some 360° photos (photospheres) that I made using my phone (Google pixel 5). They also want to show a 3D representation of one of their projects so using Three.js seems to be the best solution.

Here is what it looks like in Google Photos:

Google Photos screenshot

And what it looks like in Three.js:

Three.js screenshot

You can see the colors are really bad (contrast, white balance, idk) compared to the original version.

It's the first time I use Three.js so here is my code:

Scene:

async connectedCallback() {
    // Scene
    this.scene = new THREE.Scene();

    // Background equirectangular texture
    const background_img = this.getAttribute('background');
    if (background_img) this.loadBackground(background_img);

    // Camera
    this.camera = new THREE.PerspectiveCamera(60, this.clientWidth / this.clientHeight, 1, 5000);

    // Lights
    // this.scene.add(new THREE.HemisphereLight(0xffeeb1, 0x080820, 0));

    const spotLight = new THREE.SpotLight(0xffa95c, 5);
    spotLight.position.set(20, 20, 20);
    spotLight.castShadow = true;
    spotLight.shadow.bias = -0.0001;
    spotLight.shadow.mapSize.width = 1024 * 4;
    spotLight.shadow.mapSize.height = 1024 * 4;
    this.scene.add(spotLight);

    // Renderer
    this.renderer = new THREE.WebGLRenderer({ antialias: true });
    this.renderer.toneMapping = THREE.ReinhardToneMapping;
    this.renderer.toneMappingExposure = 2.3;
    this.renderer.shadowMap.enabled = true;
    this.renderer.setPixelRatio(devicePixelRatio);
    this.renderer.setSize(this.clientWidth, this.clientHeight);
    this.appendChild(this.renderer.domElement);

    // Orbit controls
    this.controls = new OrbitControls(this.camera, this.renderer.domElement);
    this.controls.autoRotate = true;

    // Resize event
    addEventListener('resize', e => this.resize());

    // Load model
    const url = this.getAttribute('model');
    if (url) this.loadModel(url);

    // Animate
    this.resize();
    this.animate();

    // Resize again in .1s
    setTimeout(() => this.resize(), 100);

    // Init observer
    new IntersectionObserver(entries => this.classList.toggle('visible', entries[0].isIntersecting), { threshold: 0.1 }).observe(this);
}

Background (photosphere):

loadBackground(src) {
    const equirectangular = new THREE.TextureLoader().load(src);
    equirectangular.mapping = THREE.EquirectangularReflectionMapping;

    // Things Github Copilot suggested, removing it does not change colors so I thing it's not the problem
    equirectangular.magFilter = THREE.LinearFilter;
    equirectangular.minFilter = THREE.LinearMipMapLinearFilter;
    equirectangular.format = THREE.RGBFormat;
    equirectangular.encoding = THREE.sRGBEncoding;
    equirectangular.anisotropy = 16;

    this.scene.background = equirectangular;
}