react实现头部导航,选中状态底部出现蓝色条块问题

const [itemIndex, setItemIndex] = useState(0);

<div className="box" onClick={(e) => {
  console.log('e', e.target?.dataset);
  if (!e.target?.dataset?.index) { return; };
  setItemIndex(Number(e.target?.dataset?.index));
}}
>
  <div className="top-item" style={{ left: `${itemIndex * 25}%` }}></div>
  <div 
    className={`${itemIndex === 0 ? 'item-active' : ''} box-item item1`} 
    data-index="0"
  >item1
  </div>
  <div 
    className={`${itemIndex === 1 ? 'item-active' : ''} box-item item2`} 
    data-index="1"
  >item2
  </div>
  <div 
    className={`${itemIndex === 2 ? 'item-active' : ''} box-item item3`} 
    data-index="2"
  >item3
  </div>
  <div 
    className={`${itemIndex === 3 ? 'item-active' : ''} box-item item4`} 
    data-index="3"
  >item4
  </div>
</div>

.box {
  margin-top: 40px;
  width: 800px;
  display: flex;
  justify-content: space-around;
  height: 60px;
  font-size: 16px;
  align-items: center; //垂直居中
  border-bottom: 1px solid #888;
  position: relative;

  .box-item {
    text-align: center;

  }

  .item-active {
    color: #1581ff;
  }

  .top-item {
    position: absolute;
    height: 3px;
    background-color: #1581ff;
    bottom: 0;
    width: calc(100% / 4);
    left: 0;
  }
}

.box {
  margin-top: 40px;
  width: 800px;
  display: flex;
  justify-content: space-around;
  height: 60px;
  font-size: 16px;
  align-items: center; //垂直居中
  // border-bottom: 1px solid #888;
  position: relative;

  &::after {
    content: "";
    width: 100%;
    height: 1px;
    position: absolute;
    left: 0;
    bottom: 0;
    // background-color: #e7e7e7;
    background-color: #888;
  }

  .box-item {
    text-align: center;

  }

  .item-active {
    color: #1581ff;
  }

  .top-item {
    position: absolute;
    height: 3px;
    background-color: #1581ff;
    bottom: 0;
    width: calc(100% / 4);
    left: 0;
  }
}