<select> inside react-popper inside react-bootstrap modal not working - modal-dialog

Question

I use a DatePicker with a select to switch the year and month. I use react-popper to show the DatePicker. But when I use the DatePicker in a react-bootstrap Modal the options of the select will popup for a second when I click it but then disappear again. I created a sandbox here to highlight the problem
import React, {useState} from 'react';
import ReactDOM from 'react-dom';
import FocusTrap from 'focus-trap-react';
import { usePopper } from 'react-popper';
export default function Tooltip() {
const [referenceElement, setReferenceElement] = useState(null);
const [popperElement, setPopperElement] = useState(null);
const [showPicker, setShowPicker] = useState(false);
const popper = usePopper(referenceElement, popperElement, {
placement: 'bottom-start'
});
const openPopper = () => {
setShowPicker(true);
};
const closePopper = () => {
setShowPicker(false);
};
return <div className='datepicker-container'>
<a ref={setReferenceElement} className="btn btn-dark" onClick={openPopper}>Click to open select in Popper</a>
{showPicker && ReactDOM.createPortal(
<FocusTrap
active
focusTrapOptions={{
initialFocus: false,
allowOutsideClick: true,
clickOutsideDeactivates: true,
onDeactivate: closePopper
}}>
<div
tabIndex={-1}
style={popper.styles.popper}
className="dialog-sheet"
{...popper.attributes.popper}
ref={setPopperElement}
role="dialog">
<div>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
</div>
</FocusTrap>,
document.querySelector('#popup-container')
)}
</div>
}
The CSS looks like this:
.datepicker-container {
position: relative;
z-index: 100;
}
.dialog-sheet {
z-index: 2003;
background-color: #EEE;
}
Has anyone an idea how could I fix this. Is there something I'm missing in the css to fix this? Or has it maybe to do with the focus trap?

Answer 1

The problem was the portal I was using. Without ReactDOM.createPortal and just rendering it in place, works fine.