Estoy creando una página que muestra todas las criptomonedas en el formato de una tarjeta, pero recibo un error.

 import { Card, Row, Col, Input } from 'antd' import React from 'react' import { Link } from 'react-router-dom' import { useGetCryptosQuery } from '../services/CryptoApi' import { useState } from 'react' import millify from 'millify' const Cryptocurrencies = () => { const {data : cryptoList, isFetching } = useGetCryptosQuery() const [cryptos,setCryptos] = useState(cryptoList?.data?.coins) console.log(cryptos) return ( <div> <Row gutter = {[32,32]} className = "crypto-card-container"> {cryptos.map((currency) => ( <Col xs = {24} sm = {12} lg = {6} className = "crypto-card" key = {currency.id}> <Link to = {'/crypto/${currency.id}'}> <Card title = {'${currency.rank}. ${currency.name}'} extra = {<img className = "crypto-img" src = {currency.iconUrl}/>} hoverable > <p>Price : {millify(currency.price)}</p> <p>Market Cap : {millify(currency.marketCap)}</p> <p>Daily Change : {millify(currency.change)}</p> </Card> </Link> </Col> ))} </Row> </div> ) } export default Cryptocurrencies

¿Cuál es el error en mi función de mapa y la devolución de llamada que he usado?