Calendar repositioning in front of datepicker after expanding and collapsing a parent div

Question

I have a datepicker element and a collapsible div within a parent div. Prior to expanding the collapsible div, the calendar displays below the datepicker and in front of the parent div, as desired. After expanding and collapsing the div with button clicks, the calendar displays on top of the datepicker, inside the div (see screenshot below). It appears the vertical scrollbar is not being removed, when it is no longer required, and causing the calendar to be repositioned. Is there a way to get my calendar to display below the datepicker and still keep the collapse feature? See code snippet and link to code sandbox.

CodeSandbox

Screenshot:

CODE SNIPPET

export default function App() {
  const [toggleCollapse, setToggleCollapse] = useState(false);
  useEffect(() => {}, [toggleCollapse]);
  return (
    <>
      <div className="wrapper">
        <pearson-datepicker></pearson-datepicker>
        <button onClick={() => setToggleCollapse(!toggleCollapse)}>
          toggleCollapse
        </button>
        {toggleCollapse ? (
          <div>
            Lorem Ipsum Text Here
          </div>
        ) : (
          <></>
        )}
        <div></div>
      </div>
    </>
  );
}