ionic/react - Popover not showing when

I’m having issues showing popover when it is positioned on the same as item with an onClick event.
Here’s my code:


          <IonPopover
            isOpen={showPopover}
            onDidDismiss={e => {
              e.preventDefault();
              console.log('Popover for chapter actions selected.')
              setShowPopover(false);
            }}>
            <IonLabel>Delete</IonLabel>
          </IonPopover>

          <IonItem
            lines="none"
            button key={id}
            onClick={e => {
              e.preventDefault();
              props.history.push(`/some-link`, { heading .title, url: });
            }}>
         
            <IonLabel slot="start">
              <h2>{title}</h2>
              <h3>{uploaded_by}</h3>
              <h4>{releaseDate}</h4>
            </IonLabel>
         
            <IonButtons slot="end">
              <IonButton
                onClick={e => {
                  e.preventDefault();
                  setShowPopover(true);
                }}
              >
                <IonIcon icon={more} />
              </IonButton>
            </IonButtons>
          </IonItem>

Per the code above, when the icon to show the popover is clicked, i’m being redirected to the next page instead.

Did you try putting the onclick on the label and not the whole item?