How can I fix location of my OutLineTextField in compose?

Question

I'm trying to add an outlinetextfield to my screen in compose, but for some reason it always appears at the bottom. I couldn't solve this situation?

Also, as a second question,

I have two dropwdown menus and clicking either one always opens the list of the first dropdown menu. Any idea why this is? It seemed okay to me. If the first dropdown menu is clicked, its list will open, if the second is clicked, the second will open. This is how it should normally be.

Hear is my screen shots

As you can see In the first picture, a small part of the outlinedtextfield is visible at the bottom.

in the second picture there is a picture of the dropdown menu problem

my code

 @Composable
fun ExchangeMainScreen(
    navController: NavController,
    viewModel: ExchangeMainViewModel = hiltViewModel()
) {


    Column(
        modifier = Modifier
            .padding(3.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {

        DropDownMenu()
        Spacer(modifier = Modifier.padding(10.dp))
        OutLineTextFieldSample()
    }

   
}

@Composable
fun OutLineTextFieldSample() {

    var text by remember { mutableStateOf(TextFieldValue("")) }

    Column(
        modifier = Modifier.padding(5.dp),
        Arrangement.Center
    ) {
        OutlinedTextField(
            label = {
                Text(
                    text = "Enter currency amount",
                    style = TextStyle(
                        color = MaterialTheme.colors.primaryVariant,
                    )
                )
            },
            colors = TextFieldDefaults.outlinedTextFieldColors(
                focusedBorderColor = MaterialTheme.colors.secondary,
                unfocusedBorderColor = MaterialTheme.colors.secondary,
                focusedLabelColor = MaterialTheme.colors.secondary,
                cursorColor = MaterialTheme.colors.primaryVariant
            ),

            value = text,
            onValueChange = { text = it },
        )

    }


}

@Composable
fun DropDownMenu() {


    var expanded1 by remember { mutableStateOf(false) }
    var expanded2 by remember { mutableStateOf(false) }

    var selectedItem1 by remember { mutableStateOf("Select Item") }
    var selectedItem2 by remember { mutableStateOf("Select Item") }

    val itemList1 = listOf(
        "USD", "TRY", "EUR", "AMD", "AFN", "BGN"
    )
    val itemList2 = listOf(
        "USD", "TRY", "EUR", "AMD", "AFN", "BGN"
    )

    Column(
        Modifier
            .fillMaxSize()
            .padding(vertical = 20.dp),
        verticalArrangement = Arrangement.Top,
        Alignment.CenterHorizontally
    ) {

        Box {
            Row(
                modifier = Modifier.padding(12.dp),
                horizontalArrangement = Arrangement.SpaceBetween,
                verticalAlignment = Alignment.Top
            ) {


                Button(
                    modifier = Modifier
                        .clip(RoundedCornerShape(5.dp)),
                    colors = ButtonDefaults.buttonColors(backgroundColor = lightGray2),
                    onClick = { expanded1 = true }) {
                    Row {
                        Text("$selectedItem1  ")
                        Icon(Icons.Default.ArrowDropDown, "")
                    }
                }
                DropdownMenu(
                    expanded = expanded1,
                    onDismissRequest = { expanded1 = false },
                ) {
                    itemList1.forEach {
                        DropdownMenuItem(
                            onClick = {
                                expanded1 = false
                                selectedItem1 = it
                            }
                        ) { Text(it) }
                    }
                }

                Spacer(modifier = Modifier.padding(4.dp))

                Image(
                    modifier = Modifier.padding(5.dp),
                    painter = painterResource(id = R.drawable.ic_currency_exchange_96),
                    contentDescription = "exchange icon"
                )

                Spacer(modifier = Modifier.padding(4.dp))

                Button(
                    modifier = Modifier
                        .clip(RoundedCornerShape(5.dp)),
                    colors = ButtonDefaults.buttonColors(backgroundColor = lightGray2),
                    onClick = { expanded2 = true }) {
                    Row {
                        Text("$selectedItem2  ")
                        Icon(Icons.Default.ArrowDropDown, "")
                    }
                }


                DropdownMenu(
                    expanded = expanded2,
                    onDismissRequest = { expanded2 = false },
                ) {
                    itemList2.forEach {
                        DropdownMenuItem(
                            onClick = {
                                expanded2 = false
                                selectedItem2 = it
                            }
                        ) { Text(it) }
                    }
                }
            }

        }

    }


}