Select Component inside Vaul Drawer not closable on first render

I'm using MUI v7.2 and rendering a inside a Vaul Drawer component. When I open the drawer and click the Select, the dropdown renders but:

• It cannot be dismissed by clicking outside.
• The dropdown items are clickable, but the menu itself doesn’t close.
• After closing the drawer and reopening it again, the dropdown starts working correctly every time.

Things I have tried: disablePortal: true → but this causes the dropdown to not render at all (invisible).

<FormControl fullWidth>
    <InputLabel >Select PI</InputLabel>
    <Select
        multiple
        value={selectedUsers!}
        onChange={(e) => setSelectedUsers(e.target.value as string[])}
        renderValue={(selected) => selected.join(", ")}
        input={<OutlinedInput label="Select PI" />}
        MenuProps={{
            //disablePortal: true 
            PaperProps: {
                sx: {
                    maxHeight: 250,
                    overflowY: "auto",
                    borderRadius: "16px",
                    mt: 1,
                },
            },
        }}
    sx={{
        borderRadius: "100px",
        backgroundColor: "#F1F1F1",
    }}
    >
    {users.map((user) => {
        const fullName = `${user.firstName} ${user.lastName}`;
        return (
            <MenuItem key={user.id} value={fullName} sx={{ p: 2, borderBottom: "1px solid #D8D8D8" }}>
            <Typography>{user.lastName}, {user.firstName<Typography>
            </MenuItem>
        );
        })}
    </Select>
</FormControl>

MUI renders the dropdown outside the drawer (in a portal).
Vaul locks focus inside the drawer, so it blocks MUI’s outside-click detection.

Tell MUI not to use a portal

MenuProps={{
  disablePortal: true,
}}

Wrap your Select in a box with position: relative

<Box sx={{ position: 'relative' }}>
  {/* your Select here */}
</Box>

Only render the Select after the drawer is open

{isDrawerOpen && (
  <Select ... />
)}