css is not rendered properly

I’m trying to build a progress bar component where I want to achieve a specific design for that, as you can see how I tried it in this codesandbox link:

https://codesandbox.io/s/determined-lamport-7zjvwj.

I want to achieve the following behavior as the screenshots maybe show:

• Initially, all dots should be blue except the first one which is rounded in blue.
• I want to keep the dots in the progress bar when I change the properties into blue if the percentage didn’t cover them otherwise white

But somehow my CSS calculation is not working properly as expected which I believe I missed something, so any ideas?

>Solution :

there is an error in line 60 et 61

    const current = steps.indexOf(stepStatus); // issue here probably
    const step = steps.indexOf(stepStatus); // issue here probably

should be:

    const current = steps.indexOf(progressBarStatus);
    const step = steps.indexOf(stepStatus)

In addition to this problem the width of the pourcentages is not accurate, you can fix this by changing the line 51 with:

    const progressBarCalculatedWith =
      ((current / (getIntermediarySteps + 1)) * 100) + (steps.length -1 - current);

this is the result :

working progress bar