reactjs - ¿Cómo posicionar dinámicamente un IonPopover para que aparezca desde un botón?

Estoy tratando de colocar un popover para que aparezca debajo de un botón cuando ese botón se hace clic. Un ejemplo de esto está en la página de documentación de Ion.

Sin embargo, el código para esto no se proporciona en React, solo en Angular.

Actualmente mi código se ve así

...
<IonButtons slot="end">
                        <IonButton onClick={() => setShowPopover(true)} expand="block">
                            <IonIcon icon={more}/>
                        </IonButton>
                    </IonButtons>
                    <IonPopover
                        isOpen={showPopover}
                        backdropDismiss={true}
                        onDidDismiss={() => setShowPopover(false)}>
                        <IonItem>Popover Item</IonItem>
                    </IonPopover>
...

El popover se activa con el botón que está encima de él. Cuando se presiona el botón, el popover aparece en el medio de la página, no sobre el botón. ¿Cómo puedo cambiar esto para que el popover se muestre adjunto al botón? (Como en la imagen)

Gracias

Respuesta #1

Inspirado por la respuesta de Thomas pero sin poder hacer que su código funcionara, lo siguiente funcionó para mí:

const [showPopover, setShowPopover] = useState<{open: boolean, event: Event | undefined}>({
  open: false,
  event: undefined,
});

<IonPopover
    isOpen={showPopover.open}
    event={showPopover.event}
    onDidDismiss={e => setShowPopover({open: false, event: undefined})}
>
   <p>This is popover content</p>
</IonPopover>
<IonButton onClick={(e) => setShowPopover({open: true, event: e.nativeEvent})}>Click</IonButton>