react-table – How to render image from API

I created a react-table from the youtube tutorial. Everything works perfectly as I wanted, but I have one problem. In the API file I have one value where I have a link. The table in the column called icon displays the link. This is understandable because there is a link in the API file. I know I should write a function that takes the value of the “icon” column (ie link) and put that function in , but I have no idea how to do it. React-table seems terribly complicated to me, and the code is from the tutorial, not mine, and I don’t know how to do this. Could someone help me with this?

API looks like this:

[{"icon":"url","other":"text"},
{"icon":"url","other":"text"}]

Table file:

import React, { useMemo } from 'react';
import '../style.css';
import { motion } from "framer-motion";
import { useTable, useGlobalFilter } from 'react-table';
import { COLUMNS } from './columns.js';
import MOCK_DATA from './MOCK_DATA.json';
import GlobalFiltering from './globalFiltering.js';

const EquipmentTable = () => {

const columns = useMemo(() => COLUMNS, [])
const data = useMemo(() => MOCK_DATA, [])

const { 
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
    state,
    setGlobalFilter} = useTable ({
        columns,
        data
    }, useGlobalFilter)

    const { globalFilter } = state

return (
    <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
        <div className="category-container">
            <div className="category-content">
                <div className='category-table'>
                    <p>Możesz przejrzeć cały spis lub wyszukać konkretne przedmioty wpisując ich nazwę, rangę, typ czy nazwę bossa, z którego dropią.</p>
                </div>
                <div className="category-table">
                    <GlobalFiltering filter={globalFilter} setFilter={setGlobalFilter}/>
                </div>
                <div className="category-table">
                    <table className="equipment-table" {...getTableProps()}>
                        <thead class="equipment-table-header">
                            {
                                headerGroups.map(headerGroup => (
                                    <tr className="header-columns" {...headerGroup.getHeaderGroupProps()}>
                                        {
                                            headerGroup.headers.map( column => (
                                                <th {...column.getHeaderProps()}>{column.render('Header')}</th>
                                            ))
                                        }
                                    </tr>
                                ))
                            }
                        </thead>
                        <tbody {...getTableBodyProps()}>
                            {
                                rows.map(row => {
                                    prepareRow(row)
                                    return (
                                        <tr className="body-rows" {...row.getRowProps()}>
                                            {
                                                row.cells.map( cell => {
                                                    return <td className="rows-style" {...cell.getCellProps()}>{cell.render('Cell')}</td>
                                                })
                                            }
                                        </tr>
                                    )
                                })
                            }
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </motion.div>
)
}
export default EquipmentTable