THREE.js improve performance on Drag select

I have to create millions of vectors based on the coordinates. I am using THree.js LineSegments for the same and it is pretty good performance wise. But to implement selection of area on drag the fps drops to 0. It is because I am creating those many individual LineSegments to be added to Object3D(helperObj) which can be used by SelectionBox. Although I am not adding the Object3D(helperObj) to scene still because of so many draw calls inside the loop it is causing the performance issue. For showing the lines I am using BufferGeometry and pushing the coordinates inside loop and adding them at once after the loop is over(lineGeometry in the working example).

/** code causing performance issue starts**/
   const geo = new THREE.InstancedBufferGeometry();
   geo.setAttribute('position', new THREE.Float32BufferAttribute([x1, y1, 0, x2, y2, 0], 3));
   const helperLine = new THREE.LineSegments(geo, hoveredMaterial);
   helperLine.visible = false;
   helperLine.userData = "row:"+i;
   helperObj.add(helperLine);
/** code causing performance issue ends**/

I need some data that I am adding in userData of helperObj for doing some operations. Is there any other way I can add userData without creating multiple LineSegments.

Working example : https://codepen.io/raksha-jain/pen/JjWPVbK

Can someone please help?