Tengo un elemento selector de fecha y un div plegable dentro de un div principal. Antes de expandir el div contraíble, el calendario se muestra debajo del selector de fecha y delante del div principal, según se desee. Después de expandir y contraer el div con clics en los botones, el calendario se muestra en la parte superior del selector de fechas, dentro del div (vea la captura de pantalla a continuación). Parece que la barra de desplazamiento vertical no se elimina, cuando ya no es necesaria, y hace que el calendario se reposicione. ¿Hay alguna manera de hacer que mi calendario se muestre debajo del selector de fechas y aún así mantener la función de contracción? Consulte el fragmento de código y el vínculo al espacio aislado de código.

CódigoSandbox

Captura de pantalla:

FRAGMENTO DE CÓDIGO

 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> </> ); }