Ionic IonAlert trigger gives an error even though I just coppied it from the docs

Question

I copied this section of code in ionic react from https://ionicframework.com/docs/api/alert and put it in the Home.tsx file.

import React from 'react';
import { IonAlert, IonButton } from '@ionic/react';

function Example() {
  return (
    <>
      <IonButton id="present-alert">Click Me</IonButton>
      <IonAlert
        trigger="present-alert"
        header="Alert"
        subHeader="Important message"
        message="This is an alert!"
        buttons={['OK']}
      ></IonAlert>
    </>
  );
}
export default Example;

I didn't change any of the code, but for some reason, it gave me this error:

Type '{ trigger: string; header: string; subHeader: string; message: string; buttons: string[]; }' is not assignable to type 'IntrinsicAttributes & AlertOptions & ReactControllerProps & { forwardedRef?: MutableRefObject<HTMLIonAlertElement | null> | ((instance: HTMLIonAlertElement | null) => void) | null | undefined; } & RefAttributes<...>'. Property 'trigger' does not exist on type 'IntrinsicAttributes & AlertOptions & ReactCon

I am really new to this and I don't know why it won't let me run this. Thank you for any help

I expected it to pop open an alert, but it didn't. I tried to look up this error, but I couldn't find a solution.