我试图通过数组中的trueDesc进行Map，但出现了这个错误。

act-refresh-runtime.development.js:315 Uncaught TypeError: Cannot read properties of undefined (reading 'map')

我有几张卡片，我根据过滤选项Map它们，它工作得很好，但当Map通过trueDesc属性时发生错误。

const Plans = () => {
  
  const [selectedTag, setSelectedTag] = useState("");
  const cards = [
    {
      id: 1,
      title: "tag1",
      tags: ["tag2"],
      price: 1050,
      num1: 4,
      num2: 4,
      pricesec1: 188,
      pricesec2: 200,
      trueDesc: [
        "firstdesc",
        "seconddesc",
        "thirddesc",
        "",
      ],
      time: 5,
    },
    { id: 2, title: "tag1", tags: ["tag1"] },
  ];

  const filteredCards =
    selectedTag === ""
      ? cards
      : cards.filter((card) => card.tags.includes(selectedTag));
  return (
    <section className="cartTypeSubSection">
      
     
      <div class="buttonplan-container">
        <button class="buttonPlan" onClick={() => setSelectedTag("tag1")}>
          tag1
        </button>
        <button
          class="buttonPlan"
          onClick={() => setSelectedTag("tag2")}
        >
         tag2
        </button>

      </div>
      <div class="card-container">
        {filteredCards.map((card) => (
          <div key={card.id} className="card customcard1">
            <div className="card-overlay">
              <h3 className="cardTitle">{card.title}</h3>
              <div className="price">
                <span className="priceNum">{card.price}</span>
              </div>
              <div class="priceList">
                <p className="priceListItem">
                   <span>{card.num1}</span> 
                  <strong className="priceCrrStrong">
                    {card.pricesec1} 
                  </strong>
                </p>
              </div>
              <div class="priceList">
                <p className="priceListItem">
                 {card.num2} 
                  <strong className="priceCrrStrong ">
                    {card.pricesec2} 
                  </strong>
                </p>
              </div>

              <div className="plandesriptionContainer">
                <span className="plandesription">
                  {card.trueDesc.map((item) => (
                    <>
                      <AiOutlineCheck
                        style={{
                          color: "green",
                          verticalAlign: "middle",
                          marginLeft: "0.5rem",
                        }}
                      />
                      <span></span>
                    </>
                  ))}
                </span>

                <span className="plandesription">
                  <span>
                    <RxCross2
                      style={{
                        color: "red",
                        verticalAlign: "middle",
                        marginLeft: "0.5rem",
                      }}
                    />
                  </span>
                  معالجة طلاء(تبهيت)
                </span>
              </div>

              <div>
                <span className="plandesription planTime">
                  <span className="planTimeIcon">
                    <BiTimeFive
                      style={{ color: "white", marginLeft: "0.5rem" }}
                    />
                  </span>
                  5 ساعات عمل
                </span>
              </div>
              <button class="button-57" role="button">
                <span class="text" className="planBtn">
                  choose
                </span>
              </button>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
};

export default Plans;