Issue regarding on multi materials after loading from the database

Questions
1

Screenshot 2025-01-09 at 3.43.47 PM
Screenshot 2025-01-09 at 3.43.47 PM790×828 21.2 KB

private createCone(color: ColorRepresentation, isForSelector: Boolean): Mesh {
const baseMaterial = new THREE.MeshBasicMaterial({ color: color, side: THREE.DoubleSide, transparent: isForSelector ? true : false, opacity: isForSelector ? 0.3 : 0 });
const sideMaterial = new THREE.MeshBasicMaterial({ color: color, side: THREE.DoubleSide, transparent: isForSelector ? true : false, opacity: isForSelector ? 0.3 : 0 });

    const materials = [sideMaterial, baseMaterial];

    const geometry = new THREE.ConeGeometry(isForSelector ? 1.5 : 10, isForSelector ? 3 : 20, 32);

    geometry.groups.forEach((group, index) => {
        group.materialIndex = index; // Assign material index
    });

    // Create the mesh
    const mesh = new THREE.Mesh(geometry, materials);

    this.outlineService.addOutline(mesh, AvailableShapes.Cone);

    if (isForSelector) {
        mesh.position.set(3, 0.5, 0)
    }

    return mesh;

}

I created a cone with 2 materials, and it displays perfectly in the scene. However, when I load it from the database, the base color appears black. When I console log the object, it shows 3 materials. Changing the color of the base material doesn’t affect the appearance, but when I change the color of the newly added material, I see the changes. What is the issue, and how can I solve this?