Add Link attribute to framer-motion carousel animation

Question

I have a carousel made with framer-motion. The carousel works just fine, but I also want to add a link to each item in the carousel and when I try to do that the CSS breaks and the carousel moves from the center to the right.

const imageVariants = {
    center: { x: "0%", scale: 1, zIndex: 5 },
    left1: { x: "-40%", scale: 0.7, zIndex: 4 },
    left2: { x: "-80%", scale: 0.5, zIndex: 3 },
    left3: { x: "-100%", scale: 0.3, zIndex: 2 },
    right3: { x: "100%", scale: 0.3, zIndex: 1 },
    right2: { x: "80%", scale: 0.5, zIndex: 3 },
    right1: { x: "40%", scale: 0.7, zIndex: 4 },
};

{images.map((image, index) => (
    <Link to={"/section/${index}"} key={index}>
    <motion.img
        key={index}
        src={image}
        alt={image}
        className="rounded-[12px] w-[200px] h-[300px] object-cover"
        initial="center"
        animate={positions[positionIndexes[index]]}
        variants={imageVariants}
        transition={{ duration: 0.5 }}
        style={{ width: "40%", position: "absolute" }}
    />
    </Link>
))}

Without the Link attribute the code works fine.

Answer 1

I created another array matching the images and called it urls:

const urls = [
  "https://pic1/",
  "https://pic2/",
  "https://pic3/",
  "https://pic4/",
  "https://pic5/"
]

And took advantage of the already iteration and index adding the a href

{images.map((image, index) => (
  <a href={`${urls[index]}`}>
    <motion.img
      key={index}
      src={image}
      alt={image}
      a href="https://travelbybaking.com"
      className="rounded-[12px]"
      initial="center"
      animate={positions[positionIndexes[index]]}
      variants={imageVariants}
      transition={{ duration: 0.7 }}
      style={{ width: "40%", position: "absolute" }}
    />
  </a>
))}

Answer 2

{images.map((image, index) => (
     <motion.div key={index}
                 alt={image}
                 initial="center"
                 className="rounded-[12px] w-fit h-[300px] object-cover"
                 animate={positions[positionIndexes[index]]}
                 variants={imageVariants}
                 transition={{duration: 0.5}}
                 style={{position: "absolute"}}>
         <Link to={`/section/${index}`}>
         <img src={image}  className="rounded-[12px] w-[500px] h-[300px] object-cover"/>
         </Link>
     </motion.div>
))}