How to avoid two transparent graphics on the same plane interfering with each other?

If two transparent geometries are in the same plane, and one is covered by another, when I rotate the camera, they will affect each other.
for example, I create a texture first

let height = 4;
let width = 4;
// to create a transparent texture, make a image first.
let imgBuffer = new Uint8Array(height*width*4);
for(let i = 0; i <height; i++) {
    for(let j = 0; j < width; j++) {
        let pos = (i*width + j)*4;
        let v = 10;
        if((i >0 && i< height -1) && (j > 0  && j < width - 1)) {
            v = 20;
        imgBuffer[pos] = v;
        imgBuffer[pos+1] = v;
        imgBuffer[pos+2] = v;
        imgBuffer[pos+3] = 255; // alpha
let alphaTexture = new THREE.DataTexture(imgBuffer, width, height, THREE.RGBAFormat);
alphaTexture.needsUpdate = true;
alphaTexture.wrapS = THREE.RepeatWrapping;
alphaTexture.wrapT = THREE.RepeatWrapping;

// create a plane
const planeGeometry = new THREE.PlaneGeometry(height, width);
const planeMeterial = new THREE.MeshBasicMaterial({color: 0xffffff, side: THREE.DoubleSide, transparent: true, alphaMap: alphaTexture})
const planeMesh = new THREE.Mesh(planeGeometry, planeMeterial);

then, I get the image like :

after that, add another geometry:

// create a line around the small geometry
let points = [
    new THREE.Vector3(1, 1, 0),
    new THREE.Vector3(1, -1, 0),
    new THREE.Vector3(-1, -1, 0),
    new THREE.Vector3(-1, 1, 0),
    new THREE.Vector3(1, 1, 0) // return back 
let lineGeometry = new THREE.BufferGeometry().setFromPoints(points);
let lineMaterial = new THREE.LineDashedMaterial( { color: 0xff0000,side:THREE.DoubleSide, linewidth: 2, transparent: false, opacity: 0.5} );
let line = new THREE.Line(lineGeometry, lineMaterial);

It will be like:

note that the line is not transparent, if I rotate the camera, it seems ok:

Last, when I change line.transparent = true and rotate the camera, the two geometry will effect each other:

To improve performance (ie by reducing the number of objects) I use textures to simulate transparency. This practice necessarily draws the two objects to the same plane, so it is unavoidable. Is there any way to resolve this visual conflict?

Looks like z-fighting issue, try to move the line off the z = 0 plane:

line.position.z = 0.01;

Another option, if you want your line to be drawn unconditionally on top of everything else:

line.material.depthTest = false;

depthTest solved problem, another way is to change transparent of line is false.