I have 2 lazyrows with cards , scrolling first is smooth , but scrolling the 2nd one starts recomposition and hangs the row

Question

Jetpack compose

In my app's homescreen there are 2 lazyrows containing same itemCards and same content , when testing on my phone when i scroll right on the first row its smooth and ok but when i start scrolling on 2nd row , the row hangs for a second or two then it compiles and is smooth again , how can i make these two optimised , like i dont want recomposition on 2nd row as 1st row has already composed same content.

Heres some related code:

@Immutable
data class itemData(
    val id: Int,
    val name: String,
    val soldBy: String,
    val stars : Int,
    val description: String,
    val painter: Painter,
    val originalPrice: Double,
    val salePrice: Double
)

Box(modifier = Modifier.fillMaxWidth()) {
    LazyRow(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        horizontalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        items(SampleItems.size) { item ->
            SaleItemCard(item = SampleItems[item], onClickToDetailScreen = onClickToDetailScreen)
        }
    }
    Box(modifier = Modifier.fillMaxWidth()) {
        LazyRow(
            modifier = Modifier.fillMaxWidth().padding(16.dp),
            horizontalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            items(SampleItems.size, key = { SampleItems[it].id }) { item ->
                SaleItemCard(
                    item = SampleItems[item],
                    onClickToDetailScreen = onClickToDetailScreen
                )
            }
        }
    }
}

as you can see i tried using keys or @immutable but still same issue