Three.js object with opacity 0 still blocks other points material, how do I avoid this interference?

Question

I made a sphere object transparent by doing

explodeSphere(targetMesh){

gsap.to(targetMesh.material, {opacity: 0, duration: 1,
onComplete: this.drawSubDots, onCompleteParams: [targetMesh]
});

And being based on the object's position array, I created points mesh.

drawSubDots(targetMesh){

if(pointGroup.children.length==0){

const randomNumWithin = (rngNum)=>{
    return (Math.random()-0.5)*2*rngNum
}

const x = targetMesh.position.x
const y = targetMesh.position.y
const radius= (this.currentSetup=='cost')? (targetMesh.userData.cost/this.biggestCost)*this.maxRadius : (targetMesh.userData.count/this.biggestCount)*this.maxRadius
const segmentCount = Math.ceil(Math.pow(targetMesh.userData.count,1/2))
const explodeExpansion=1.05
const explodeGeometry = new THREE.SphereGeometry(radius*explodeExpansion,segmentCount,segmentCount);
const pointMaterial = new THREE.PointsMaterial( { color: targetMesh.userData.color,size:0.01,transparent:true,opacity:0.3 } );
const pointsMesh = new THREE.Points( explodeGeometry, pointMaterial );

const {array}=pointsMesh.geometry.attributes.position;
const {count}=pointsMesh.geometry.attributes.position;
for(let i=0;i<count;i++){
    let i3 = i*3;
    array[i3]=randomNumWithin(radius)
    array[i3+1]=randomNumWithin(radius)
    // array[i3+2]=randomNumWithin(radius)
}

pointsMesh.position.x=x;
pointsMesh.position.y=y;
console.log(pointsMesh)
pointGroup.add(pointsMesh)
// targetMesh.position.z=-2*radius;
scene.add(pointGroup)

}


}

However, the sphere with zero opacity is still blocking point mesh and the outcome is like

The hidden sphere is blocking the point mesh.

How do I completely hide the sphere that I could see the points? (I don't want to change the position of the sphere like pushing backward etc because I need to fire another event once the mouse moves away from the sphere (raycaster) )

Thank you in advance.