Layout bug when in ConstraintLayout

[wingsum93]

Layout bug when in ConstraintLayout (compose)

Here is the screenshot:

Attached my compose layout code:

ConstraintLayout(
                    modifier = Modifier.fillMaxSize(),
                ) {
                    val (title, picker, btn) = createRefs()
                    var pickerValue by remember { mutableStateOf(2) }
                    Text(text = "Select Next No of People", modifier = Modifier.constrainAs(title) {
                        centerHorizontallyTo(parent)
                        top.linkTo(parent.top)
                    })
                    NumberPicker(
                        modifier = Modifier
                            .constrainAs(picker) {
                                centerHorizontallyTo(parent)
                                top.linkTo(title.bottom)
                            }
                            .size(100.dp, 200.dp),
                        value = pickerValue,
                        range = 0..10,
                        dividersColor = Color.Cyan,
                        onValueChange = {
                            pickerValue = it
                        }
                    )

                    Button(onClick = { /*TODO*/ }, modifier = Modifier.constrainAs(btn) {
                        centerHorizontallyTo(parent)
                        bottom.linkTo(parent.bottom)
                    }) {
                        Text(text = "Click")
                    }
                }

[LimitLost]

Those Big Cyan Bars Are Caused By Size modifier