Im able to get my lazyrows on the right to vertically scroll with my lazycolumn on the left. The lazyrow will vertically scroll individually but when i try to get only the multiple lazyrows to scroll together it wont vertically scroll at all. why can it do it individually but not all at once?

Here is my code:

import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.detectHorizontalDragGestures
import androidx.compose.foundation.gestures.detectVerticalDragGestures
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.ui.graphics.Color

@Composable
fun ScrollStateComposable() {
    val verticalScrollState = rememberScrollState()
    var horizontalScrollOffset by remember { mutableStateOf(0f) }
    val itemCount = 20 // Number of items

    Column(
        modifier = Modifier
            .verticalScroll(verticalScrollState)
            .fillMaxSize()
    ) {
        Row(modifier = Modifier.fillMaxWidth()) {
            // Left side: Column
            Column(modifier = Modifier.weight(1f)) {
                for (index in 0 until itemCount) {
                    Text(
                        text = "Column Item $index",
                        fontSize = 20.sp,
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(8.dp)
                            .background(Color.LightGray)
                            .height(50.dp) // Ensure each item has a fixed height
                    )
                }
            }

            // Right side: Rows inside a Column
            Column(
                modifier = Modifier
                    .weight(2f)
                    .pointerInput(Unit) {
                        detectHorizontalDragGestures { change, dragAmount ->
                            horizontalScrollOffset = (horizontalScrollOffset + dragAmount).coerceIn(-2000f, 0f)
                            change.consume()
                        }
                    }
            ) {
                for (rowIndex in 0 until itemCount) {
                    Row(
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(8.dp)
                            .height(50.dp) // Ensure each row has the same height as the items in the left Column
                            .offset { IntOffset(horizontalScrollOffset.toInt(), 0) }
                    ) {
                        for (itemIndex in 0 until 20) {
                            Text(
                                text = "Row $rowIndex, Item $itemIndex",
                                fontSize = 20.sp,
                                modifier = Modifier
                                    .background(Color.LightGray)
                                    .width(100.dp) // Ensure each item has a fixed width
                                    .height(50.dp)
                            )
                        }
                    }
                }
            }
        }
    }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    ScrollStateComposable()
}