react-three-fiber 360 image darker than the original image

I'm trying to create a 360 image using react-three-fiber. The 360 viewer is working perfectly as it purposed but the generated image is darker than the original image.

Here's the screenshot from my 360 viewer

Here's the original image

Here's my code

import React, { Suspense } from "react";
import { useTexture, OrbitControls } from "@react-three/drei";
import { Canvas } from "@react-three/fiber";
import * as THREE from "three";

const Generate360Image = (props) => {

  var myTexture = useTexture(props.imageLocation);

  return (
    <>
      <mesh
        position={[0, 0, 0]}
      >
        <sphereGeometry attach="geometry" args={[500, 60, 60]} />
        <meshBasicMaterial
          attach="material"
          map={myTexture}
          side={THREE.DoubleSide}
        />
      </mesh>
    </>
  );
};

class GenerateImage extends React.Component {
  render() {
    return (
      <Canvas style={{ width: "100%", height: "100%" }}>
        <Suspense fallback={null}>
          <Generate360Image
            imageLocation={this.props.myImage}
            className="image-canvas"
          />
        </Suspense>
        <OrbitControls
          autoRotate="true"
          autoRotateSpeed={0.4}
          minDistance={5}
          maxDistance={80}
        />
      </Canvas>
    );
  }
}

export default GenerateImage;

Any help will be appreciated. Thanks!