android jetpack compose - How do I get the .transposable() and .clickable() to play nice together? - Stack Overflow

So I've come some jetpack composables upon which I'm trying to implement a zoom and pan feature.
I have a parent Box that is doing the transformabl stuff like so:

var scale by remember { mutableStateOf(1f) }
var offset by remember { mutableStateOf(Offset.Zero) }
val state = rememberTransformableState { zoomChange, offsetChange, rotationChange ->
    scale *= zoomChange
    offset += offsetChange
}
Box(
    Modifier
        .graphicsLayer(
            scaleX = scale,
            scaleY = scale,
            translationX = offset.x,
            translationY = offset.y
        )
        .transformable(state = state).background(Color.Red)
        .fillMaxSize()
){
    content()
}

I'm passing in table made up of a column and rowes with this cell as a child.

fun MysteryImage(cellWidth: Dp, id: String, onCellChange: (selected: Boolean, position: String) -> Unit) {
var clicked by remember { mutableStateOf(false) }
AnimatedContent(clicked) {
    if (clicked) {
        Image(
            painter = org.jetbrainspose.resources.painterResource(Res.drawable.bomba),
            contentDescription = "bomba image",
            modifier = Modifier.size(cellWidth)
            .clickable {clicked = !clicked; onCellChange(clicked, id) }
        )
    } else {
        Image(
            painter = org.jetbrainspose.resources.painterResource(Res.drawable.mineCell),
            contentDescription = "empty cell",
            modifier = Modifier.size(cellWidth)
            .clickable {clicked = !clicked; onCellChange(clicked, id)}
        )
    }
}

The clicking works fine but the pinch to zoom seems to only work if I don't touch one of the cells with the .clickable on it. How do I make it so that the pinch to zoom takes precedence of the touch?