I'm working on rendering an icosahedron wireframe using threejs and react-three/fiber. I'd like to be able to change the color of an individual line in the frame.

This is the code I have currently:

import { Canvas } from "@react-three/fiber";
import ReactDOM from "react-dom";

function Icosahedron(
  props: JSX.IntrinsicElements["mesh"] | JSX.IntrinsicElements["line"]
) {
  return (
    <Canvas style={{ width: "100vw", height: "100vh" }}>
      <ambientLight />
      <pointLight position={[10, 10, 10]} />
      <mesh position={[0, 0, 0]}>
        <icosahedronGeometry args={[2, 1]} />
        <meshStandardMaterial
          wireframe={true}
          color="black"
          wireframeLinewidth={10}
        />
      </mesh>
    </Canvas>
  );
}

ReactDOM.render(<Icosahedron />, document.getElementById("root"));

Which produces the following result: Icosahedron where all line colors are the same.

What I'm looking for is this: Icosahedron where one line is a different color (blue).

I've tried the following:

1. Rendering the wireframe through the LineSegments geometry, and providing an array of materials instead of a single one. This just ends up with a blank canvas and no console error output.

2. Binding a ref to the icosahedronGeometry, accessing the position attribute and rendering another line to cover the wireframe line. This seems bulky and inefficient.

Is there a simple way to change the colors of the lines individually?