I'm pretty new to javascript, and I'm trying to create an automatic slideshow/carousel that displays images. I came across how to create an automatic slide show where each slide is a color, but I'm struggling to get it to display an image. Below, I have included what I have so far. I would really appreciate any help or advice on how to get this to work.

import React, {useState, useEffect} from 'react';
import C1 from './CarouselData';
//import {image} from './CarouselData';
//importBackIosIcon from @material-ui/icons/ArrowBackIos'//

const image = ["C1", "#00C49F", "#FFBB28"];
const delay = 3000;

export default function Carousel () {
  const [index, setIndex] = React.useState(0);
  const timeoutRef = React.useRef(null);

  function resetTimeout() {
    if (timeoutRef.current) {
      clearTimeout(timeoutRef.current);
    }
  }

  React.useEffect(() => {
    resetTimeout();
    timeoutRef.current = setTimeout(
      () =>
        setIndex((prevIndex) =>
          prevIndex === image.length - 1 ? 0 : prevIndex + 1
        ),
      delay
    );
  
  return () => {
      resetTimeout();
    };
  }, [index]);

  return (
    <div className="slideshow">
      <div
        className="slideshowSlider"
        style={{ transform: `translate3d(${-index * 100}%, 0, 0)` }}
      >
        {image.map((background, index) => (
          <div
            className="slide"
            key={index}
            style={{ background}}
          ></div>
        ))}
        </div>

      <div className="slideshowDots">
        {image.map((_, idx) => (
          <div
            key={idx}
            className={`slideshowDot${index === idx ? " active" : ""}`}
            onClick={() => {
              setIndex(idx);
            }}
          ></div>
        ))}
      </div>
    </div>
   
  );
}

CarouselData.js

import C1 from '../carousel-images/carousel-1.jpg';
import C2 from '../carousel-images/carousel-2.jpg';
import C3 from '../carousel-images/carousel-3.jpg';

export const image = [C1, C2, C3];