Ionic toolbar triggers context menu out of viewport when app inside a div

Question

I just created an Ionic 6 app with the following command:

$ ionic start happy-meal tabs --type=react

My goal is:

1. to have a toolbar with a MENU button at the end that when clicked it opens up a context menu.
2. the app should be enclosed into a DIV.

My problem is:

The code I have below encloses the app into a DIV as expected, but when clicking the button, the context menu is not on the proper position (it should appear inside the viewable area) as you can see on the image below:

You can test the code by yourself by just replacing the content of file: App.tsx with:

import {
  IonApp,
  IonButton,
  IonButtons,
  IonContent,
  IonHeader,
  IonPage,
  IonRow,
  IonTitle,
  IonToolbar,
  setupIonicReact,
  useIonPopover
} from '@ionic/react';

/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';

/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';

/* Optional CSS utils that can be commented out */
import '@ionic/react/css/padding.css';
import '@ionic/react/css/float-elements.css';
import '@ionic/react/css/text-alignment.css';
import '@ionic/react/css/text-transformation.css';
import '@ionic/react/css/flex-utils.css';
import '@ionic/react/css/display.css';

/* Theme variables */
import './theme/variables.css';

setupIonicReact();

const Navbar = () => {
  const Popover = () => <IonContent className="ion-padding">Hello World!</IonContent>;
  const [present, dismiss] = useIonPopover(Popover, {
    onDismiss: (data: any, role: string) => dismiss(data, role),
  });
  return (
    <IonHeader>
      <IonToolbar>
        <IonTitle size="large">Happy Meal</IonTitle>
        <IonButtons slot="end">
          <IonButton onClick={
            (e: any) => present({
              event: e,
            })
          }>Menu</IonButton>
        </IonButtons>
      </IonToolbar>
    </IonHeader>
  );
};

const Screen = () => {
  return (
    <IonPage>
      <Navbar />
      <IonContent fullscreen>
        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">Screen</IonTitle>
          </IonToolbar>
        </IonHeader>
        <IonRow>
          You are on the main Screen.
        </IonRow>
      </IonContent>
    </IonPage>
  );
};

const App = () =>
  <div style={{ textAlign: 'center' }}>
    <div style={{
      display: 'inline-block',
      margin: '20px auto',
      textAlign: 'left',
      position: 'relative',
      width: '400px',
      height: '750px',
      fontSize: '0.9em',
      border: 'solid 2px #bfbfbf',
    }}>
      <IonApp>
        <Screen />
      </IonApp>
    </div>
  </div>;

export default App;

Any idea on how can I solve this issue?

Thanks!