How to highlight a cube face on hover? THREE.js

I am using raycaster to define the face of a cube and then paint the face like this

const colorAttribute = intersected.object.geometry.getAttribute('color');
colorAttribute.setXYZ(face.a, color.r, color.g, color.b);
colorAttribute.setXYZ(face.b, color.r, color.g, color.b);
colorAttribute.setXYZ(face.c, color.r, color.g, color.b);
colorAttribute.needsUpdate = true;

But as you can see, the face is not completely painted over. Can someone help?

A box geometry is indexed by default so highlighting individual faces via vertex colors does not work. You can easily fix this by converting the geometry to non-indexed via BufferGeometry.toNonIndexed().

Updated fiddle:

thanks for the comment, but now the painted face is divided into 2 even triangles, i would like the whole square edge to be covered. Do I need also to define a neighboring triangle somehow?

Finally found out solution