CubeCamera Reflection Mapping Issue

Hi guys,
I’m relative new to threeJS and I’m currently working on a project with the need of dynamic reflection.
I followed the threejs example on the official website and successfully got a working reflection.
However the mapping of the cube camera render target texture seems to be off.

The left square should be in the white area.
Here’s my implementation of the dynamic reflection.

    cubeRenderTarget = new THREE.WebGLCubeRenderTarget( 128 );
    cubeRenderTarget.texture.type = THREE.HalfFloatType
    cubeCamera = new THREE.CubeCamera( 0.1, 1000, cubeRenderTarget );
    cubeCamera.position.set(0, 0, 30);
    // scene.add(cubeCamera)
    cubeRenderTarget.texture.mapping = THREE.CubeRefractionMapping
    material = new THREE.MeshStandardMaterial( {
        envMap: cubeRenderTarget.texture,
        roughness: 0.03,
        metalness: 1
    } );
    sphere = new THREE.Mesh( new THREE.IcosahedronGeometry( 5, 15 ), material );
    sphere.position.set(0, 0, 30);
    scene.add( sphere );

You can check out my full code right here