¿Existe una solución basada en React/javascript para solucionar el problema de desbordamiento-x-visible con desbordamiento-y-auto?

Tengo una barra lateral pegajosa en React que, cuando se hace clic, revelará un menú de opciones (vea las capturas de pantalla a continuación). Investigar overflow-x-visible con overflow-y-auto es un problema continuo. He implementado varias de las soluciones propuestas, que incluyen: style="padding-bottom: 250px; margin-bottom: -250px; y creando un contenedor div más amplio aquí y aquí . También he estado trabajando en este tutorial. Sin embargo, No puedo hacer que funcione para mi caso de uso.

Código abreviado usando Tailwind CSS:

 <Sidebar className="h-96 overflow-y-auto overflow-x-visible"> <SidebarItemNew className="relative"> <DropdownOptions className="absolute"/> </SidebarItemNew> </Sidebar>

¿Alguna forma de hacer que esto funcione para React? ¡Gracias por la ayuda!