如何在react中向来自数据库的键添加图标

import React, { useState, useEffect } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCheck, faTimes } from '@fortawesome/free-solid-svg-icons';

const MyComponent = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    // 从数据库中获取数据的逻辑
    // 并将结果设置到data状态中
    // 示例中使用了一个假数据
    setData([
      { key: 'key1', value: 'value1', isApproved: true },
      { key: 'key2', value: 'value2', isApproved: false },
    ]);
  }, []);

  return (
    <div>
      <h1>Keys from Database</h1>
      <ul>
        {data.map(item => (
          <li key={item.key}>
            {item.key}
            {item.isApproved ? (
              <FontAwesomeIcon icon={faCheck} color="green" />
            ) : (
              <FontAwesomeIcon icon={faTimes} color="red" />
            )}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default MyComponent;