Kotlin Jetpack Compose AnimateIntAsState() behaves differently depending on whether the target is larger

Question

So, I am trying to animate a bar in Jetpack Compose and I found that the function "animateIntAsState" acts very weirdly. To better explain my problem, I made a video showing the target value and animated value which you can find at https://youtube.com/shorts/9508gN7_ilU?feature=share.

Here is the code:

@Composable
fun Bar(
    modifier: Modifier = Modifier,
    percentage2: Int = 0,
    barCount: Int = 10
) {
    val percentage = 360 - percentage2
    val activeBars = (percentage).toInt()
    Log.e("akjshdk", "active bars = " + activeBars)
    val animationBar by animateIntAsState(
        targetValue = activeBars,
        animationSpec = tween(
            durationMillis = 4000,
            easing = FastOutSlowInEasing
        )
    )
    
    Column(
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("Animation bar = $animationBar")
        Text("Active Bars = $activeBars")
    }
}

If activeBars is bigger than animationBar, then the animation is restarted on every change. However, when activeBars is smaller, every refresh decrements animationBar by 1. Changing percentage variable to val percentage = -(360 - percentage2) changed this behavior, where if activeBars is smaller than animationBar, then the animation is restarted on every change.