React Carousel에 이미지를 동적으로 렌더링하는 방법은 무엇입니까?

React Carousel에 이미지를로드하려고합니다. 내 이미지의 파일 경로 배열을 통해 매핑 할 때 모든 이미지를 하나의 '슬라이드'에로드하지만 다른 슬라이드에로드해야합니다.

참조 (한 슬라이드에있는 4 개의 사진 모두) :

구함 (아래에있는 4 개의 점은 슬라이드 4 개를 나타냅니다.이 예제는 하드 코딩 된 것입니다) :

다음은 관련 코드입니다. Item.js는 부모이고 CarouselImages.js는 파싱하기 위해 가져온 함수입니다. 이러한 구성 요소에는 더 많은 것이 있지만 필요한 부분으로 축소했습니다.

Item.js

import React from 'react';
import Carousel from 'react-elastic-carousel'
import CarouselImages from 'components/DatabaseManager/HelperFunctions/CarouselImages.js'
import {
    Col,
    Row,
    CarouselItem
} from 'reactstrap'


class Item extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            activeContent: "item",
        }
    }
..
    render() {
        return (
            <div>
                <Row>
                    <Col md="6">
                        <Carousel itemsToShow={1}>
                            <CarouselImages data={this.props.data} />
                        </Carousel>
                    </Col>
                </Row>
            </div>
        )
    }
}

export default Item;

작동하는 하드 코딩 된 Item.js :

...
    <Carousel itemsToShow={1}>
        <item><img src={require(`assets/img/phones/i5BlackScreenFront.jpg`)} alt="phone" /></item>
        <item><img src={require(`assets/img/phones/i5BlackScreenBack.jpg`)} alt="phone" /></item>
        <item><img src={require(`assets/img/phones/i5WhiteScreenFront.jpg`)} alt="phone" /></item>
        <item><img src={require(`assets/img/phones/i5WhiteScreenBack.jpg`)} alt="phone" /></item>
    </Carousel>
...

CarouselImages.js :

import React from 'react';

export default function CarouselImages({ data }) {
    return (
        data.photoPath.map((image) => {
            return <item><img src={require(`assets/img/${image}`)} alt="phone" /></item>
        })
    )
}

데이터 소품 (API 호출에서) :

{
    "photoPath": [
        "phones/i5BlackScreenFront.jpg",
        "phones/i5BlackScreenBack.jpg",
        "phones/i5WhiteScreenFront.jpg",
        "phones/i5WhiteScreenBack.jpg"
    ]
}