我想让我的IonIcons是动态的，这样它们就可以重用了。但是我需要在{}中设置它。我不知道如何使用.map（）元素来实现这一点。

import React from "react";
import { IonIcon, IonLabel } from "@ionic/react";
import styles from "./quickOptions.module.css";
import { alarmOutline, personOutline, cartOutline } from "ionicons/icons";

export default function quichOptions() {
  const quickOptions = [
    { title: "Jouw consulent", icon: { personOutline } },
    { title: "Jouw afspraken", icon: { alarmOutline } },
    { title: "Jouw bestellingen", icon: { cartOutline } },
  ];

  return (
    <div className={styles.mainContainer}>
      {quickOptions?.map((element: any) => {
        return (
          <div key={element.title} className={styles.btnContainer}>
            <IonLabel>{element.title}</IonLabel>
            <IonIcon icon={element.icon} size="large" /> //here
          </div>
        );
      })}
    </div>
  );
}

元素。图标没有给出{personOutline}的输出，例如，有人知道如何修复这个问题吗？