Анимация нижнего navbar

Хочу сделать так, чтобы при нажатии на одну из иконок, под ней образовалась некая полоса, которая будет означать , что человек находится на данной странице (примерно вот так:)

А на данный момент, мой navbar выглядит вот так:

Вот что у меня есть на данный момент (HTML):

<div id="marker"></div>

                <HomeIcon/>
            
                <TimelineIcon/>
                  
                <AccountCircleIcon/>
         
                <ExploreIcon/>
                    

CSS:

  body{
  position: fixed;
  bottom: 0;
  left: 0;
  background: #f2f2f2;
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
  border-top: 1px solid lightgray;
  z-index: 100;
}
  .MuiSvgIcon-root{
    font-size: 35px;
    cursor: pointer;
    transition: 0.3s cubic-bezier(0.1,0.1,0.5,1.4);
    :hover{
      transform: translateY(-5px);
    }
  }
  #marker{
    position: absolute;
    height: 4px;
    width: 0;
    background: #000;
    bottom: 8px;
    left: 0;
    transition: 0.5s;
    border-radius: 4px;
  } 

И немного JavaScript:

let marker = document.querySelector('#marker');
    let item = document.querySelectorAll('nav a .MuiSvgIcon-root');

    function indicator(e){
        marker.style.left = e.offsetLeft +"px";
        marker.style.width = e.offsetWidth +"px";

    }
    item.forEach(link =>{
        link.addEventListener('click', (e)=>{
            indicator(e.target)
        })
    })