tengo un problema aqui por favor alguien me puede ayudar? Tengo un problema con la tabla Ant Design aquí, en la columna Fuente aquí quiero insertar un ícono, ya he insertado un ícono pero quiero que el ícono cambie según los datos del dispositivo, si el Id del dispositivo = 1 sería "Humano Icon" que aparecerá, pero si ID de dispositivo = 2, será "Icono de computadora" el que se mostrará.

Aquí está el código:

 import React, { useEffect, useState } from 'react'; import { Card, Col, Divider, Layout, Row, Table, Tag } from 'antd'; import React, { useEffect, useState } from 'react'; import axios from 'axios'; import { Content, Footer, Header } from 'antd/lib/layout/layout'; import 'antd/dist/antd.css'; import '../Page/Dashboard.css'; import { LaptopOutlined, UserAddOutlined, UserOutlined } from '@ant-design/icons'; const columns = [ { title: "No", dataIndex: "id", key: "id", }, { title: 'Device ID', dataIndex: "dev_id", key: "dev_id", }, { title: 'Message ID', dataIndex: "msg_id", key: "msg_id", }, { title: 'Time Stamp', dataIndex: "time_stamp", key: "time_stamp", }, { title: 'RFID', dataIndex: "rfid", key: "rfid", }, { title: 'Data Hewan', dataIndex: "animals", key: "animals", }, { title: 'Weight (kg)', dataIndex: "weight", key: "weight", }, { title: 'Temperature (Celcius)', dataIndex: "temp", key: "temp", }, { title: 'Tags', dataIndex: "tags", key: "tags", render: (_, { tags }) => ( <> {tags.map((tag) => { let color = 'geekblue'; if (tag === 'Invalid Data') { color = 'volcano'; } else { color = 'geekblue'; } return ( <Tag color={color} key={tag}> {tag.toUpperCase()} </Tag> ); })} </> ), }, { title: 'Source', dataIndex: "", key: "", render: text => <UserOutlined /> } ]; export default function Dashboard(){ return ( <Table column={columns} dataSource={dataQurban} /> )}

Gracias espero que me puedas ayudar!