Render multiple image carousels in a mapped array

I have an array of objects with data and one of the key is gallery, which is an array of URLs: data=[{id:1,gallery:[]},{id:2, galery:[]}].
I did an image carousel in the mapped “data” array. The problem is that the carousels, of each item, are not independent one of each other. Each time I change the picture on one of them, it changes to the other also.
Here is the code:

export class MyComponent extends Component {
    render() {
       return (
         <section>                
           {data &&
              data.map((item, i) =>
                (<div key={i}>
                   <div>
                    ...some data here
                   </div>
                    <div className='carousel' key={item}>
                            <img src={left}
                                className='left-arrow' alt="left"
                                onClick={() => prevSlide(item.gallery)} />
                            <img src={right}
                                className='right-arrow' alt="right"
                                onClick={() => nextSlide(item.gallery)} />
                            {item && item.gallery?.map((img, j) => (
                                <>
                                 {j === this.state.current && (
                                  <img src={img} alt={item.id} className='cart-image' key={j} />
                                    )}
                                </>
                            ))}
                    </div>
                 </div>))}
         </section>)}}
export default MyComponent

I want to have a different carousel for each item from data array. For the moment it is working like a big one, instead of two.
For me it is strange that all the other data it is rendered the way I want.
Could you please help me?
Thank you in advance