Check if a set of objects intersect with another set of objects

I have an object(LineA) that is composed of 4 children and sub-children. They are Meshes(MeshLineMaterial) and ArrowHelpers. Then I have another set of objects(Other Lines) of the same kind.

I am trying to create a system where when I create LineA, it shouldn’t collide/cross with Other Lines.

I have tried the bounding box and raycaster:

function collision()
{
  var originPoint = LineA.position.clone();
var bb=new THREE.BoxHelper(LineA, 0x00ff00);
bb.geometry.computeBoundingBox(); 
var collidableMeshList = OtherLines;
	
	for (var vertexIndex = 0; vertexIndex < bb.geometry.attributes.position.array.length; vertexIndex++)
	{	
    		
		var ray = new THREE.Raycaster( bb.position, bb.geometry.attributes.position.array[vertexIndex] );
		var collisionResults = ray.intersectObjects( collidableMeshList );
		if ( collisionResults.length > 0)  
		{
      console.log("true");
      hit = true;
     }
  } 
} 

I tried referring to this example

function detectCollisionCubes(bb, Line2bb){
  bb.geometry.computeBoundingBox(); //not needed if its already calculated
  Line2bb.geometry.computeBoundingBox();
  bb.updateMatrixWorld();
  Line2bb.updateMatrixWorld();
  
  var box1 = bb.geometry.boundingBox.clone();
  box1.applyMatrix4(bb.matrixWorld);

  var box2 = Line2bb.geometry.boundingBox.clone();
  box2.applyMatrix4(Line2bb.matrixWorld);

  return box1.intersectsBox(box2);
}

None of them seems to be working in my case.
They show no error.
Any help would be greatly appreciated.

/cc