I was creating a carousel which displays trending cryptoCurrencys using AliceCarousel but the output is not correct

picture of the output https://i.stack.imgur.com/5kxvb.png

code of the carousel

import React from 'react' import AliceCarousel from 'react-alice-carousel'; import { Link } from 'react-router-dom'; import UseAxios from '../hooks/UseAxios' import "./Trending.css";

const Trending = () => {

const { response } = UseAxios("search/trending");

return (
    

 {response && response.coins.map(coin => {
         return <div className='flex slide' key={coin.item.coin_id}>

             <Link to={`/coin/${coin.item.id}`}>
                 <div>
                    <AliceCarousel 
                    mouseTracking
                    infinite
                    autoPlayInterval={1000}
                    animationDuration={1500}
                    disableButtonsControls
                    autoPlay
                    >
                     <img src={coin.item.large} className="mt-0 relative top-30 img" />
                     <p key={coin.item.coin_id} className="name"> {coin.item.name}  </p>
                     </AliceCarousel>
                 </div>
             </Link>

         </div>
     })}
 </div>

)

}

export default Trending; note:- library being used is AliceCarousel. can someone please help me fix the carousel.