Reactstrap - отображение локального изображения на карусели

Я пытаюсь создать карусель с изображениями, которые хранятся в каталоге моего приложения для реагирования. Когда я использую примеры по умолчанию, найденные здесь:

https://reactstrap.github.io/components/carousel/

Все нормально работает. Проблема в том, когда я добавляю свои собственные изображения.

import customImage from './images/customImage.jpg';
const items = [
  {
    src: {customImage}, //Not Working
    altText: 'Slide 1',
    caption: 'Slide 1'
  }, 
  {
    src: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800   %22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa20%20text%20%7B%20fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa20%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3203125%22%20y%3D%22218.3%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
    altText: 'Slide 2',
    caption: 'Slide 2'
    //Working
  },
  {
    src: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa21%20text%20%7B%20fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa21%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23555%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22277%22%20y%3D%22218.3%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
    altText: 'Slide 3',
    caption: 'Slide 3'
    //Working
  }
];

Код моей карусели следующий:

const slides = items.map((item) => {
  return (
    <CarouselItem
      className="trustedMechsCarousal"
      onExiting={this.onExiting}
      onExited={this.onExited}
      key={item.src}
    >
    <img src={item.src} alt={item.altText} />
    <CarouselCaption captionText={item.caption} captionHeader={item.caption} />
    </CarouselItem>
  );
});

return(
  <div className='TrustedMechs'>
    <div className='SectionTitle'><h1>Trusted Mechanics</h1></div>
      <Carousel
        activeIndex={activeIndex}
        next={this.next}
        previous={this.previous}
      >
      <CarouselIndicators items={items} activeIndex={activeIndex} onClickHandler={this.goToIndex} />
        {slides}
        <CarouselControl direction="prev" directionText="Previous" onClickHandler={this.previous} />
        <CarouselControl direction="next" directionText="Next" onClickHandler={this.next} />
      </Carousel>
    </div>
  </div
);

Ссылка ниже связана с вопросом, который, похоже, имеет ту же проблему, что и я, но был вызван тем, что html не отображает карусель. Моя карусель отображается, но изображение не отображается.

Карусель не отображает изображение