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

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!