I have a dropdown menu using MUI Select to sort (A-Z, newest-oldest), and I have a button next to it to reverse direction (Z-A, oldest-newest). Is it possible to extend the border of the Select (which darkens on hover) around the IconButton?

Here's a gif of what currently happens: border highlights on hover but goes back to normal when cursor moves to button.

If I just change the Paper both elements are in to variant="outlined", the outline cuts right through the label of the Select, whereas the Select's outline leave a gap for the label:

If it's not possible to extend the Select's outline around the button, then can I make a new border around the whole element that has the same behavior on hover -- but without doubling the width of the border around the Select? Or can I make a border just around three sides of the little nubbin that's sticking out with the IconButton in it? How might I do that?

Here's the relevant part of my code for that component:

return (
    <FormControl sx={{ minWidth: "152px", mt: 1, }} >
        <Paper sx={{ bgcolor: "#fefcf9", }}>
        <InputLabel id="arrange-by-label">Arrange By</InputLabel>
        <Select
            labelId="arrange-by-label"
            id="arrange-by"
            value={litTextsOrder}
            label="Arrange By"
            onChange={handleLitTextsOrder}
            sx={{ bgcolor: "#fefcf9", minWidth: "132px" }}
        >
            {valuesArr.map((valueArr, index) => {
                return (
                    <MenuItem 
                        key={index} 
                        value={valueArr[0]}
                    >
                        {valueArr[1]} 
                    </MenuItem>
                )
            })}
        </Select>
        <Box component="span">
        <IconButton>
            <CompareArrowsIcon sx={{ transform: "rotate(90deg)"}}/>
        </IconButton>
        </Box>
        </Paper>
    </FormControl>
)

Thanks for your help, y'all!