Three.js - previous lines become invisible after cloning - three.js

Question

I'm attempting to duplicate an array of lines, but when I do, the previous ones somehow become dark or invisible. The previous lines can still be accessed with all their properties and I tested them also having the correct location. I shift both sets of lines, and the previous ones are not visible. Does anyone know what the problem could be?
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var lines = []
currentIndex = 0;
addLines()
duplicateLines(0)
var lineColorGradientList = [
0x100FFF,
0x0F76FF,
0x0FE0FF,
0x0FFFB3,
0x0FFF4A,
0x3DFF0F,
0xA7FF0F,
0xFFED0F
]
function addLines(){
var linesArray = []
for(i=0; i<8; ++i){
var geometry = new THREE.Geometry();
geometry.vertices.push(
new THREE.Vector3(0, 0, 2),
new THREE.Vector3(3, 0, 0));
var color = lineColorGradientList[i]
var material = new THREE.LineBasicMaterial({
color: color
});
var line = new THREE.Line( geometry, material );
line.geometry.verticesNeedUpdate = true;
line.material.needsUpdate = true
linesArray.push(line)
}
linesArray.forEach(function(line) {
line.frustumCulled = false;
scene.add(line);
});
lines.push(linesArray)
}
function duplicateLines(selectedIndex){
currentIndex += 1
var linesArray = []
for(i=0; i<8; ++i){
var line = lines[selectedIndex][i].clone()
line.geometry.verticesNeedUpdate = true;
line.material.needsUpdate = true
linesArray.push(line)
}
lines.push(linesArray)
lines[currentIndex].forEach(function(line) {
line.frustumCulled = false;
scene.add(line);
});
}

Answer 1

You also need to clone the geometry in order for it to work.
My corrected duplicateLinesFunction:
function duplicateLines(selectedIndex){
currentIndex += 1
var linesArray = []
for(i=0; i<8; ++i){
var line = lines[selectedIndex][i].clone()
line.geometry = lines[selectedIndex][i].geometry.clone()
line.geometry.verticesNeedUpdate = true;
line.material = lines[selectedIndex][i].material.clone()
line.material.needsUpdate = true
linesArray.push(line)
}
lines.push(linesArray)
lines[currentIndex].forEach(function(line) {
line.frustumCulled = false;
scene.add(line);
});
}