inline CSS styles backgroundImage in React import images not working

Question

Can you please help me with why this is not working. I have tried every possible way and still not get why it is not showing on the screen. Only the commented out inside the div work however what i want is a backgroundImage.

import React from "react";
import styles from "./Carosel.module.css";
import legend from "../carousel-photos/legend.jpg";
import legend1 from "../carousel-photos/legend2.jpeg";

function Carousel() {
  return (
    <div className={styles.carousel}>
      <div
        className={styles.carouselInner}
        styles={{
          backgroundImage: `url(${legend})`,
        }}
      >
        {/* <img src={images[0].img} /> */}
      </div>
    </div>
  );
}

export default Carousel;

.carousel {
  width: 60%;
  height: 700px;
  /* background-color: black; */
}

.carouselInner {
  height: 100%;
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
}

This is how I put my folder directory looks like