Why my ternary does not working in inline style - Reactjs

Question

I have a slider and i should slide its border to the left or right when user click ">" or "<" (it hidden in the screenshot). I know how to add variable to style attribute, but i have no i dea why it does not working here.

here is the slider :

i have this ternary variable, i think there is something wrong with it but i didn't find where :

<div className="slider__progressBar"
    style={{
           "--progressBar-width": `calc(100% / ${dataSlider.length})`,
            "--progressBar-right": `${i.id <= 1} ? "0" : "calc((100% / ${dataSlider.length}) * ${i.id}))"`
         }}
>

THe CSS :

  &::after {
      content: "";
      width: var(--progressBar-width);
      height: 1px;
      background: #FFF;
      display: block;
      position: absolute;
      right: var(--progressBar-right);
      bottom: -1px;
    }

in browser console i have this :

<div class="slider__progressBar" style="--progressBar-width:calc(100% / 4); --progressBar-right:true ? &quot;0&quot; : &quot;calc((100% / 4) * 1))&quot;;"> 01  /<span class="slider__progressBar-lighterTxt"> 07</span> Inspirationd</div>

So when the id equals 1 i should have right: 0, and the slider should be on top, but nothing in this case !