Multiple stacked identical sized absolute positioned elements showing through each other

Been working on a React radial progress timer for some projects I have been thinking about recently.

However, if you look at the timer, there is a faint border where a shape that is behind a mask is showing through – even though these shapes have the same size, border, positioning, everything. The shape in front should perfectly mask the one behind, yet there’s still a hint of color showing around the border.

I am going to fiddle with this a bit more and try out some of my own ideas, but I was hoping someone here could offer some advice on why this is happening and a good way to prevent it, preferably without having to add more masking elements or a border around the timer component.

Thanks in advance to anyone who has time to take a look!