First of all, I created this example before to connect with API

const enterprises = [
    {
      address: 'Barueri, São Paulo',
      org_name: 'Innova',
      enterprise_name: 'Made Lab',
      footage: 'Possui 300m²',
      enterprise_type: 'Loteamento',
      quantity: 'Qnt. dispoíveis: 4',
      img_url: [
        {
          key: 1,
          src:
            'https://media.discordapp.net/attachments/462727233895661570/938506736065716294/unknown.png',
        },
        {
          key: 2,
          src:
            'https://media.discordapp.net/attachments/462727233895661570/938506703715053628/unknown.png',
        },
      ],
    },
];

And I also created this carousel component

import { useState } from 'react';
import { CarouselWrapper, Slide, ArrowLeft, ArrowRight } from './styled';
import P from 'prop-types';

const ImgCarousel = ({ slides }) => {
  const [current, setCurrent] = useState(0);
  const length = slides.length;

  const nextSlide = () => {
    setCurrent(current === length - 1 ? 0 : current + 1);
  };

  const prevSlide = () => {
    setCurrent(current === 0 ? length - 1 : current - 1);
  };

  if (!Array.isArray(slides) || slides.length <= 0) {
    return null;
  }

  return (
    <CarouselWrapper>
      {slides.map((slide, index) => {
        return (
          index === current && (
            <Slide key={index} url={slide.image}>
              <ArrowLeft onClick={prevSlide} />
              <ArrowRight onClick={nextSlide} />
            </Slide>
          )
        );
      })}
    </CarouselWrapper>
  );
};

ImgCarousel.propTypes = {
  slides: P.array,
};
export default ImgCarousel;

I know I need to scroll and get the lenght of the image and I did that, but I'm having trouble to add the images into the code behind:

<CardImg>
    // HERE
    <ImgCarousel src={img_url} key={} />
</CardImg>

Can anybody help me with that?