I have a component that shows an image on a card, and a menu component. In the menu component, there are several buttons that I want to use their onclick event to call a handler on my first component. These components are not nested to each other.

What do you suggest I do?

The code below is not my actual code; it is brief.

const ImgViewer: React.FC<{}> = (prop) => {

  const handleHE = () => {
    setImgUrl(Data)
  };

  return (
    <React.Fragment>
      <IonCard>
        <IonCardContent className="ion-text-center">
          <IonImg onIonImgDidLoad={dismiss} src={imageUrl} />
        </IonCardContent>
      </IonCard>
    </React.Fragment>
  );
};

const menuItem = [
  {
    text: "Histogram Equalization",
    itemOnclick: () => {
      handleHE(); // calling the event handler
    },
    itemIcon: sendOutline,
  },
  {
    text: "Send",
    itemOnclick: () => {},
    itemIcon: sendOutline,
  },
];

const Menu: React.FC = () => {
  return (
    <IonMenu contentId="main" type="overlay">
      <IonContent>
        <IonList id="inbox-list">
          {menuItem.map((btn, index) => {
            return (
              <IonMenuToggle key={index} autoHide={false}>
                <IonItem onClick={btn.itemOnclick} detail={false}>
                  <IonIcon slot="start" icon={btn.itemIcon} />
                  <IonLabel>{btn.text}</IonLabel>
                </IonItem>
              </IonMenuToggle>
            );
          })}
        </IonList>
      </IonContent>
    </IonMenu>
  );
};