Jetpack compose material3 TextField minimum height

so I have a OutlinedTextField with supportingText which is available with conditions.

var usernameValue by remember { mutableStateOf(TextFieldValue("")) }
androidx.compose.material3.OutlinedTextField(
    modifier = Modifier
        .fillMaxWidth()
        .minimumInteractiveComponentSize(),
    value = usernameValue,
    onValueChange = {
        usernameValue = it
    },
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Text),
    colors = androidx.compose.material3.TextFieldDefaults.textFieldColors(
        focusedIndicatorColor = Color.White,
        disabledIndicatorColor = Color.White,
        unfocusedIndicatorColor = Color.White,
        containerColor = Color(0xFFE5EAF0),
        placeholderColor = Color.Transparent
    ),
    shape = RoundedCornerShape(size = 12.dp),
    singleLine = true,
    isError = shouldShowUsernameError,
    supportingText = {
        if (shouldShowUsernameError)
            Text(
                userNameErrorMessage,
                color = MaterialTheme.colorScheme.error
            )
    }
)

this is the screen when there is no error

and this the screen when there is error

as you can see problem is when there is error, error messages change the layout!
and the question is how can I set minimum height for OutlinedTextField

The layout changes because when shouldShowUsernameError=true there is the supportingText.

To avoid it you can use something like:

supportingText = {
    Text(
        text = if (shouldShowUsernameError) "userNameErrorMessage" else "",
        color = MaterialTheme.colorScheme.error
    )
}