Im trying to figure out a way to not render the inner faces of transparent cubes that are beside each other in react-three-fiber, my cubes currently look like this:

so what im trying to do is make the inner faces not render, but i dont exactly know how. ive seen a few answers but none for react-three-fiber, and im not sure how to port threejs answers to react-three-fiber. if anyone could show me how to do this it would be greatly appreciated. thanks :)