In react progress bar, how to make the map marker follow the filled in percentage?

I am trying to build a progress bar in reactjs. Although, I pretty much got everything working except I can't figure how to make the map marker follow the filled in progress bar. Right now, it's just sitting all the way to the left. Is it possible to make that follow the progress bar somehow?

Parent Component:

<div className="col-md-10">
  <div className={styles['progress']}>
    <ProgressBar className={styles['progress-bar']} percentage={this.state.percentage} />
    <h2 className={styles.currentMoney}>${money_earned}</h2>
  </div>
</div>

ProgressBar:

const ProgressBar = (props) => {
  return (
      <div className={styles['progress-bar']}>
        <Filler percentage={props.percentage} />
        <div className={styles.map} style={{ width: `${props.percentage}%` }}>
                    <div class={`${styles['progress-value']}`}></div>
        </div>
      </div>
    )
}

Filler:

const Filler = (props) => {
  return(
        <div className={styles.filler} style={{ width: `${props.percentage}%` }}>
            <span className={styles.offCircle}></span>
            <div class={`${styles['progress-value']}`}></div>
        </div>
  )
}

CSS:

.test_progress-bar {
  position: relative;
  height: 20px;
  border-radius: 50px;
  border: 1px solid #333;
}

.filler {
  background: #f6ba2b;
  height: 100%;
  border-radius: inherit;
  transition: width .2s ease-in;
}
.map {
  content: "\F3C5";
  font-family: "Font Awesome 5 Free";
}
.progress-bar .map {
  content: "\F3C5";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  /*position: absolute;
  top: -88px;
  right: -10px;*/
  font-size: 25px;
  font-weight: 700;
  color: #000;
}
.progress-bar .map:before, 
    .progress-bar .map:after
    {
      position: absolute;
    color: #707070;
    top: 0;
    width: 50px;
    height: 50px;
    /* background: #fff; */
    margin-top: -44.5px;
    /* border-radius: 36px; */
    /* border: 2px solid #707070; */
    text-shadow: 0 0 0px black;
    line-height: 47px;
    text-align: center;
    font-size: 19px;
    }
    .progress-bar .map:before{
      content: "\F3C5";

      color: #444;
    }



.row,.progress{ position: relative;width: 100%; margin-top: 40px;margin-bottom: 55px;}
    .progress-bar{position:relative;background: #fff;height: 30px; border-radius:36px; border: 1px solid black;}
    .progress-bar > .filler .offCircle{
      position:absolute;width:100%;
      height:100%;
      /* background:red; */
    }

    .progress:after,
    .progress-bar:before,
    .progress-bar:after,
    .progress-bar > .filler .offCircle:before, 
    .progress-bar > .filler .offCircle:after
    {
      position: absolute;
      color: #707070;
      top: 0;
      width: 50px;
      height: 50px;
      background: #fff;
      margin-top: -11.5px;
      border-radius: 36px;
      border: 2px solid #707070;
      text-shadow: 0 0 0px black;
      line-height: 47px;
      text-align: center;
      font-size: 19px;
    }
    .progress-bar > .filler .offCircle:before{
      content: '$\A $100';
      left:3.67%;
      color: #444;
    }

    .progress-bar > .filler .offCircle:after{

      content: '$\A $500';
      left:15.33%;
      color: #444;
    }
    .progress-bar:before{
      content: '$$\A $1000';
      left:26.67%;
      color: #444;
    }
    .progress-bar:after{
      content: '$$\A $2500';
      left:46.76%;
      color: #444;
    }
    .progress:after{
      content: '$$\A $5000';
      left:70.33%;
      color: #444;
    }


.progress .progress-value{
  width: 50px;
  height: 25px;
  font-size: 16px;
  font-weight: 600;
  color: #f4bc25;
  line-height: 25px;
  border-radius: 4px;
  position: absolute;
  top: -113px;
  right: -23px;
  letter-spacing: 1px;
}