Material UI Select menu displays horizontally instead of vertically

I have a Material-UI Box with 2 components inside: a TextField that acts as a Select with a menu created with MenuItems, and a button below this TextField that deletes the selected content in the select. The problem is that without placing the button, the menu of the Select component does appear correctly vertically, but adding the button below this component causes the menu to display horizontally.

Select without button

Select with button Layout with button

<Box sx={{ position: "absolute", top: "57%", left: "13%", width: "11%" }}>
<TextField
    select
    variant="outlined"
    label="Bebida 1"
    fullWidth
    name="pos1"
    value={cocktails.pos1}
    onChange={handleSelectChange}
    SelectProps={{
        MenuProps: {
            anchorOrigin: {
                vertical: "bottom",
                horizontal: "left"
            },
            transformOrigin: {
                vertical: "top",
                horizontal: "left"
            },
            getContentAnchorEl: null
        }
    }}
>

    {allDrinks.map(drink => (
        <MenuItem key={drink} value={drink}>{drink}</MenuItem>
    ))}
</TextField>

{cocktails.pos1 !== "" &&
    <Box sx={{ position: "absolute", left: "30%", alignItems: "center", align: "center" }}>
        <IconButton color="secondary" aria-label="Eliminar bebida"
            onClick={(e) => {
                e.preventDefault();
                handleRemove('remove_pos1')
            }}
        >
            <Icon style={{ fontSize: "2vw" }}>highlight_off</Icon>
        </IconButton>
    </Box>
}

I repeat this with 6 Select componenets and 6 buttons, and with only adding one button all of the select menu change to vertical.

Is there a way to display the Select menu vertically, so that it is above the button?