Autoscrolling LazyRow issue

Question

I'm filling a LazyRow with buttons. Buttons' onClick works fine, but when the LazyRow autoscrolls they are not clickable any longer. Why? I tried also with canvases instead of Buttons, but clickable stops working when the LazyRow starts autoscrolling.

Here I fill a LazyRow with Notes by going through an array of data.

val lazyListState = rememberLazyListState()
LazyRow(
     horizontalArrangement = Arrangement.Center,
     verticalAlignment = Alignment.Top,
     modifier = Modifier
          .fillMaxSize(),
     state = lazyListState,
) {
     score.forEachIndexed { index, item ->
          items(item.second) {
               Note(noteSize, noteSize / 2 + (noteSize / 2) * item.first, item.first)
          }
     }
  }

Then I launch a routine to move the LazyRow by calling a suspend function in an infinite loop.

LaunchedEffect(key1 = Unit) {
     while (true) {
          lazyListState.autoScroll()
     }
}

suspend fun ScrollableState.autoScroll(
    animationSpec: AnimationSpec<Float> = tween(durationMillis = 3000, easing = LinearEasing)
) {
    var previousValue = 0f
    scroll(MutatePriority.PreventUserInput) {
        animate(0f, SCROLL_DX, animationSpec = animationSpec) { currentValue, _ ->
            previousValue += scrollBy(currentValue - previousValue)
        }
    }
}

Finally, here are the buttons (Notes)

@Composable
fun Note(
    noteSize: Dp,
    verticalOffSet: Dp,
) {
    OutlinedButton(
        colors = ButtonDefaults.buttonColors(containerColor = Color.Red),
        onClick = { Log.i("Hi", "Hi!") },
        modifier = Modifier
            .offset(0.dp, verticalOffSet)
            .size(noteSize),
        shape = CircleShape //create a Generic Shape to model the note head
    ) { }
}