Change material of cloned mesh with multiple assinged materials in React Three Fiber

Question

Im trying to highlight cloned object when clicked.

Everything works as expected as long as each mesh in object has one material assigned. When loading FBX often fbx.material is an array. When looping and replacing within the array all cloned meshes get higlighted.

this is my code so far:

let mesh = LoadFBX(path).clone();
mesh.traverse((mesh, i) => {
  if (mesh.isMesh) {
    if (mesh.material.length) {
      for (let i = 0; i < mesh.material.length; i++) {
        if (active) {
          mesh.material[i] = new MeshStandardMaterial({
            color: 0xf000f4,
          });
        } else {
          let matTemp = new MeshStandardMaterial({
            color: 0xffffff,
          });

          mesh.material[i] = matTemp;
        }
      }
    } else {
      if (active) {
        mesh.material = new MeshStandardMaterial({
          color: 0xf000f40,
        });
      } else {
        let matTemp = new MeshStandardMaterial({
          color: 0xffffff,
        });
        mesh.material = matTemp;
      }
    }
  }
});

Answer 1

So I managed to find a solution.

It seems to work by creating a new material Array:

if (mesh.material.length) {
 let materialArray = [];
 for (let i = 0; i < mesh.material.length; i++) {
   if (active) {
     let matTemp = new MeshStandardMaterial({
       color: 0xf000f40,
     });
     materialArray.push(matTemp);
   } else {
     let matTemp = new MeshStandardMaterial({
       color: 0xffffff
     });
     materialArray.push(matTemp)
   }
 }
 mesh.material = materialArray;
}