JS/CSS Animate Nav Indicator

I have to build a small interesting navigation using ReactJs & Tailwind. Everything is almost done except animating an indicator when changing a position.
So everything is associated with an absolute position indicator, so I will only share information about it.

So it has 2 states (in order to dynamically define the position and width of the menu item):

const [indicatorWidth, setIndicatorWidth] = useState('');
const [indicatorPosition, setIndicatorPosition] = useState('');

and selecting menu items like:

const items: any = document.querySelectorAll(".menuItem");

So, in order to select a link from navigation, I have a click event on the link:

onClick={() => setActiveNav(i)}

And here is the function that will make it work:

const setActiveNav = async (index: number) => {
        if (items[index]) {
            setActive(index)
            await new Promise(r => setTimeout(r, 0));
            setIndicatorPosition(items[index].offsetLeft)
            setIndicatorWidth(items[index].offsetWidth)
        }
    }

So at that point, only thing to define is style of the indicator like:

<span className={`nav-indicator`} style={{width: indicatorWidth, left: indicatorPosition}}/>

And to make it beautiful:

.nav-indicator{
  position: absolute;
  background: linear-gradient(90deg, #F27261 0%, #A63121 100%);
  box-shadow: 0 0 300px 24px rgba(225, 63, 50, 0.6);
  border-radius: 80px;
  top: 0.70rem;
  height: 70%;
  transition: ease-in-out 0.3s;
}

So the problem comes in the end… I’m managing to animate the transition between changing the navigation. I should only make it to rotate it a bit before finalizing the select.
Should I use before and after? What would be the best way here?