click on MUI's select in bootstrap dropdown makes it disappear - reactjs

Question

As the title said, I have a material UI's select in a bootstrap dropdown. When I click on the select, the dropdown closes, and the popover than appear is placed in a bad place.
Assuming that the popover should be created inside the dropdown for it not to happen, I tried to make it this way, using the anchorEl.
The console tells me "Popover.js:162 MUI: The anchorEl prop provided to the component is invalid.
The anchor element should be part of the document layout.
Make sure the element is present in the document or that it's not display none."
And it doesn't fix the issue. I'm quite lost, any idea? As a detail, I made a test using Button + Popover instead of the select, and it works.
Code:
import "./styles.css";
import React, { useRef, useState } from "react";
import Select from "#mui/material/Select";
import FormControl from "#mui/material/FormControl";
import MenuItem from "#mui/material/MenuItem";
function MySelect() {
const ref = useRef();
const [value, setValue] = useState("null");
const [anchor, setAnchor] = useState(null);
const handleChange = () => {};
const onOpen = (e) => {
setAnchor(e.currentTarget);
};
return (
<>
<div ref={ref}>
<FormControl fullWidth>
<Select
value={value}
onOpen={onOpen}
onChange={handleChange}
MenuProps={{ anchorEl: anchor, anchorReference: "anchorEl" }}
>
<MenuItem value="null">Hey</MenuItem>
<MenuItem value="hello">Hello</MenuItem>
<MenuItem value="hello2">Hello</MenuItem>
<MenuItem value="hello3">Hello</MenuItem>
<MenuItem value="hello4">Hello</MenuItem>
<MenuItem value="hello5">Hello</MenuItem>
<MenuItem value="hello6">Hello</MenuItem>
<MenuItem value="hello7">Hello</MenuItem>
<MenuItem value="hello8">Hello</MenuItem>
<MenuItem value="hello9">Hello</MenuItem>
<MenuItem value="hello10">Hello</MenuItem>
<MenuItem value="hello11">Hello</MenuItem>
<MenuItem value="hello12">Hello</MenuItem>
<MenuItem value="hello13">Hello</MenuItem>
<MenuItem value="hello14">Hello</MenuItem>
<MenuItem value="hello15">Hello</MenuItem>
<MenuItem value="hello16">Hello</MenuItem>
<MenuItem value="hello17">Hello</MenuItem>
<MenuItem value="hello18">Hello</MenuItem>
<MenuItem value="hello19">Hello</MenuItem>
<MenuItem value="hello20">Hello</MenuItem>
<MenuItem value="hello21">Hello</MenuItem>
</Select>
</FormControl>
</div>
</>
);
}
export default function App() {
return (
<div className="App" style={{ width: "400px" }}>
<div
id="my-dropdown"
className="dropdown"
style={{ marginLeft: "200px" }}
>
<a
id="my-btn"
href="#"
data-bs-toggle="dropdown"
data-bs-auto-close="outside"
aria-expanded="false"
>
Filter
</a>
<div
className="dropdown-menu dropdown-menu-sm-end"
aria-labelledby="my-btn"
>
<div>stuff to fill a bit</div>
<MySelect />
</div>
</div>
</div>
);
}
Link to try : https://codesandbox.io/s/lucid-babbage-5gfcqo?file=/src/App.js