I have a Alice-Carousel in react where I am getting the items from an API.After fetching the data from API , I am updating the items array for the carousel but am getting the value of items as undefined. CryptoState is the context to prevent prop-drilling.

```
import React from 'react'
import { useEffect ,useState} from 'react';
import { CryptoState } from '../CryptoContext'
import { TrendingCoins } from '../api';
import axios from 'axios'
import AliceCarousel from 'react-alice-carousel';
import {Link} from 'react-router-dom'

const Carousel = () => {
    const [trending,setTrending] = useState([]);
    const {currency,setCurrency} = CryptoState();

    useEffect(() => {
      const {data}= axios.get(TrendingCoins(currency));
      setTrending(data);
    },[currency,trending])

    // 0 pe 2 items dikhane hai, 512 size pe 4 items dikhane hai,
    // thats all about responsiveness.

    const responsives = {               
      0: {
        items: 2
      },
      512: {
        items: 4
      }
    }

    const items= trending.map((coin) => {
      return (
        <>
          <Link to={`/coins/${coin.id}`}/>
          <img 
             className="carouselImages"
             src={coin?.image}
             height="80"
             style={{marginBottom:10}}
          />
        </>
      )
    })

    return (
      <AliceCarousel
       infinite
       mouseTracking
       autoPlayInterval={1000}
       animationDuration={1500}
       disableDotsControls
       responsive={responsives}                     
       autoPlay
       items={items}
      />
    )
}

export default Carousel

```