how i render only 5 first element from map react?

Question

I want print some elements(3-6 elements) from json. I'm using map to print element, but if i use them i print all of element from json and my div is duplicated.

const [tickets, setTicket] = useState([]);
useEffect(() => {
    getTicket();
}, []);

const listMainProduct = [];
function getTicket() {
    axios
        .get('http://localhost:8080/api/event/ticket')
        .then((data) => {
            let x = data.data;

            setTicket(x);
        })
        .catch((err) => alert(err));
}

{tickets.map((item, index) => (
            <div id='containerFix'>
                <Carousel fade>
                    <Carousel.Item interval={50000000}>
                        <div class='card-deck'>
                            <div class='card'>
                                <img className='d-block w-100' src={logo} alt='First slide' />
                                <div class='card-body'>
                                    <h5 key={0} class='card-title'>
                                        {item.nameEvent}
                                    </h5>
                                    <p class='card-text'>Date: {item.dateTimeEvent}</p>
                                    <p class='card-text'>Location: {item.locationEvent}</p>
                                    <p class='card-text'>Price ticket: {item.priceEvent}</p>
                                </div>
                                <button class='buttonProduct'>Buy ticket!</button>
                            </div>
                            <div class='card'>
                                <img className='d-block w-100' src={logo} alt='First slide' />

                                <div class='card-body'>
                                    <h5 key={1} class='card-title'>
                                        {item.nameEvent}
                                    </h5>
                                    <p class='card-text'>Date: {item.dateTimeEvent}</p>
                                    <p class='card-text'>Location: {item.locationEvent}</p>
                                    <p class='card-text'>Price ticket: {item.priceEvent}</p>
                                </div>
                                <button class='buttonProduct'>Buy Ticket</button>
                            </div> 
.......

Photo: [1]: https://i.stack.imgur.com/VxrOM.png

I tried using the index but even that didn't help me. Maybe there is some other way? For example using a list?