Material-UI Select (or Select styling) with a custom Popper? - css

Question

Problem:
I've been trying to figure out the right/best way to use a Material-UI Select component with a customized Popper for its dropdown menu. What I'm hoping to do is make something that looks like the following (but with Material-UI components or keeping the styling of a Material-UI Select component with the 'outlined' variant):
Options I've considered:
1. Simply customize the children of the Select component.
I've tried the following, however, it seems like the Popper component still closes if it is clicked on anywhere and I can't seem to figure out how to stop that.
import * as React from "react";
import { FormControl, InputLabel, Select } from "#mui/material";
export default function BasicSelect() {
return (
<FormControl sx={{ minWidth: 120 }}>
<InputLabel id="demo-simple-select-label">Dropdown</InputLabel>
<Select
label="Dropdown"
MenuProps={{
sx: { marginLeft: "-8px" },
onClick: (e) => { e.preventDefault(); e.stopPropagation(); }
}}
>
<div onClick={(e) => { e.preventDefault(); e.stopPropagation(); }}>
Test
</div>
</Select>
</FormControl>
);
}
2. Apply Select component css components/styles to a button or div that opens a Popper.
To start with, I tried the following but it didn't seem to apply the MUI select styling to the div:
import * as React from "react";
export default function Test() {
return (
<div className={`MuiSelect-select`}>
Test
</div>
);
}
Probably for obvious reasons that the element the class is being applied to is not a select (but I don't want it to be).
3. Write out css from scratch that tries to mimic the Select styling as close as possible.
Would be cumbersome, but potentially doable, I suppose.
What would you suggest or recommend? Thanks!