Points created by CSS3DSprite cannot be dragged or dropped

[xiaoxiaofu1]

Points created by CSS3DSprite cannot be dragged or dropped
Sprites can be dragged and dropped, so I tried to create a sprite that covers CSS3DSprite, but found that CSS3DSprite always stays at the top layer
Below is some of my code. How can I solve the drag and drop problem

const graph = new ForceGraph3D(container, {
controlType: 'orbit',
extraRenderers: [new CSS3DRenderer()],
})
.nodeThreeObject(createNodeObject(nodeMap))
.onNodeClick(handleNodeClick(graph))
.onNodeDragEnd(handleNodeDragEnd);

const createNodeObject = (nodeMap) => (node) => {
const element = document.createElement('div');

element.className = 'test-element';
element.style.textAlign = 'center';
element.style.position = 'relative';
// Add other DOM, such as images, text, etc., and omit them


const group = new THREE.Group();

// Found that CSS3DSprite cannot be dragged and dropped, while sprite can
const sprite1 = new CSS3DSprite(element)
group.add(sprite1);

// Not covered, you can still see the red sprites behind CSS3DSprite
const spriteMaterial = new THREE.SpriteMaterial({
  color: '#ff0000',
  transparent: true,
  opacity: 1,
}); 
const sprite2 = new THREE.Sprite(spriteMaterial);
group.add(sprite2); 
return group;

};