All the items moving when dragging in LazyVerticalGrid

Question

@Preview(showBackground = true)
@Composable
fun Greeting() {

    var initialXOffset by remember { mutableStateOf(0f) }
    var initialYOffset by remember { mutableStateOf(0f) }
    var xOffset by remember { mutableStateOf(0f) }
    var yOffset by remember { mutableStateOf(0f) }
    var dragging by remember { mutableStateOf(false) }
    val scale by animateFloatAsState(
        if (dragging) 0.9f else 1f, animationSpec = tween(
            durationMillis = 500,
            easing = LinearOutSlowInEasing
        )
    )

    LazyVerticalGrid(columns = GridCells.Fixed(3)) {
        val itemList = listOf<String>(
            "Viskin",
            "Emerys",
            "Zephrithe",
            "Milo",
            "Vamo",
            "Briu",
            "Ackner",
            "Wilo",
            "Ridner"
        )
        items(itemList.size) {
            Card(
                modifier = Modifier
                    .padding(8.dp)
                    .onGloballyPositioned { coordinates ->
                        initialXOffset = coordinates.positionInRoot().x
                        initialYOffset = coordinates.positionInRoot().y
                    }
                    .pointerInput(Unit) {
                        awaitPointerEventScope {
                            MainScope().launch {
                                detectDragGestures(
                                    onDragStart = {
                                        dragging = true
                                    },
                                    onDrag = { change, dragAmount ->
                                        change.consume()
                                        xOffset += dragAmount.x
                                        yOffset += dragAmount.y
                                    },
                                    onDragEnd = {
                                        dragging = false
                                    },
                                    onDragCancel = {
                                        dragging = false
                                    })
                            }
                        }
                    }
                    .scale(scale)
                    .graphicsLayer(translationX = xOffset, translationY = yOffset),
                shape = RoundedCornerShape(12.dp),
                elevation = CardDefaults.cardElevation(4.dp)
            ) {
                Text(
                    text = itemList[it],
                    modifier = Modifier
                        .padding(12.dp)
                        .align(CenterHorizontally),
                    fontSize = 12.sp,
                    fontWeight = FontWeight.Bold,
                    textAlign = TextAlign.Center
                )
            }
        }
    }
}

I have added pointer input modifier to the Card.your text So each item must response to it's own element's modifier but all of them are moving simultaneously. This happens on dragging a single element. The gesture is passing to all the elements instead of being restricted to only one. I am even consuming the