Unexpected output when adding png image to threejs

Question

I am sorry that I cannot find suitable words in title to describe my problem.

Now I just created insert a png in threejs.

  var material = new THREE.MeshLambertMaterial({
      map: loader.load(phoneImg),
      transparent: true,
  });
  var geometry = new THREE.PlaneGeometry(100, 100);
  var phone = new THREE.Mesh(geometry, material);
  phone.position.set(0, 180, -220);
  scene.add(phone);

At the same time, I also map the world with a background image.

  const skyGeo = new THREE.SphereGeometry(1000, 25, 25);
  const textureLoader = new THREE.TextureLoader();
  const texture = textureLoader.load("/img/moonsky.png");
  texture.encoding = THREE.sRGBEncoding;
  texture.mapping = THREE.EquirectangularReflectionMapping;
  const skyMaterial = new THREE.MeshPhongMaterial({
      map: texture,
      toneMapped: true,
      transparent: true,
  });
  skyBox = new THREE.Mesh(skyGeo, skyMaterial);
  skyBox.material.side = THREE.BackSide;
  scene.add(skyBox);

The problem now is when in some angles, the transparent part of the phone can be invisible as expected. However, in another some angles, it "passes through" the skyBox image and I can see the real world directly.

Answer 1

phone.renderOrder = 110

Lastly, I tried to add renderOrder and seems the problem solved.