Javascript 在react进度条中，如何使地图标记跟随填充的百分比？

我正在尝试在reactjs中构建一个进度条。尽管如此，除了我不知道如何使地图标记跟随填充的进度条外，我几乎所有的东西都在工作。现在，它就一直坐在左边。有没有可能让它以某种方式跟随进度条

父组件：

<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>

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>
    )
}

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

.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;
}

---

我也有一个类似的组成部分，面临着同样的问题，你能找出这个问题吗@瑞恩