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

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.