I am making a page which displays all the cryptocurrencies in the format of a card but I am getting an 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
 

what is the error in my map function and the callback I have used?