Android Compose - After zooming out, part of surface is not drawn

Android Studio, Jetpack Compose, virtual device API 24

After zooming out surface, only the part that was visible at the beginning is visible. I want to zoom out and see more that I saw at the beginning.

I also want to be able to drag the surface.

class MainActivity : ComponentActivity() {
    private var width = 20
    private var height = 20

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val task = TapaGenerator.build(width, height)

        setContent {
            Android_tapaTheme {
                Surface(color = MaterialTheme.colors.background) {
                    RenderBoard(width, height, task)
                }
            }
        }
    }
}

@Composable
fun RenderBoard(width: Int, height: Int, task: Task) {
    val minScale = 0.3f
    val maxScale = 3f

    val scale = remember { mutableStateOf(1f) }
    val translation = remember { mutableStateOf(Offset.Zero) }
    val state = rememberTransformableState { zoomChange, offsetChange, rotationChange ->
        scale.value *= zoomChange
        if (scale.value < minScale) {
            scale.value = minScale
        } else if (scale.value > maxScale) {
            scale.value = maxScale
        }
        translation.value += offsetChange
    }

    Surface (
        modifier = Modifier
            .graphicsLayer(
                scaleX = scale.value,
                scaleY = scale.value,
                translationX = translation.value.x,
                translationY = translation.value.y,
            )
            .transformable(state = state)
    ) {
        Column {
            for (y in 0 until height) {
                Row {
                    for (x in 0 until width) {
                        Square(x = x, y = y, task) // this is composable surface
                    }
                }
            }
        }
    }
}