BootstrapPopover "Each child in a list should have a unique "key" prop"

Question

I get the error i mentioned when using my BootstrapPopover Component as Wrapper. how can i put in a key for each element here when mapping over the triggers?

import { Component, CSSProperties } from "react";
import { OverlayTrigger } from "react-bootstrap";
import { Popover } from "react-bootstrap";
import { OverlayTriggerProps } from "react-bootstrap";
import { OverlayChildren } from "react-bootstrap/esm/Overlay.js";

export default class BootStrapPopover extends Component<
  Partial<OverlayTriggerProps> & { text?: string | React.JSX.Element; onMouseLeavePopover?: React.MouseEventHandler<HTMLDivElement>; popoverStyle?: CSSProperties }
> {
  public render(): React.JSX.Element {
    const { children, text, overlay, placement, delay, onMouseLeavePopover, popoverStyle, trigger } = this.props;
    const props: Partial<OverlayTriggerProps> & { overlay: OverlayChildren } = {
      ...this.props,
      container: typeof document !== "undefined" ? document.getElementById("ModalContainer") : undefined,
      delay: delay || {
        show: 500,
        hide: 100,
      },
      placement: placement || "top",
      rootClose: true,
      trigger: trigger || ["hover", "focus"],
      overlay: overlay || (
        <Popover className="d-none d-lg-block" style={popoverStyle} onMouseLeave={onMouseLeavePopover} id="popover-bootstrap">
          <Popover.Body>{text}</Popover.Body>
        </Popover>
      ),
    };

    return children ? <OverlayTrigger {...props}>{children}</OverlayTrigger> : <></>;
  }
}

i already tried to check if trigger isArray and mapped over it