Problems rendering background images in my component in Nextjs 14

Question

`I'm creating a slider component in my project in Nextjs 14 with typescript.

The problem that arises is simple. I can't display the images set as wallpaper.

my component code is as follows:

import React from 'react'
import styles from './style.module.css'
import img1 from '@/assets/img1.jpeg'
import img2 from '@/assets/img2.jpeg'
import img3 from '@/assets/img3.jpeg'
import img4 from '@/assets/img4.jpeg'
import img5 from '@/assets/img5.jpeg'
import img6 from '@/assets/img6.jpeg'
import { StaticImageData } from 'next/image'

interface Slide {
    name: string;
    description: string;
    imageUrl: StaticImageData;
}

const slides: Slide[] = [
    {
        name: 'Switzerland',
        description: 'Switzerland is a country in Europe that is located in the southern part of Europe.',
        imageUrl: img1,
    },
    {
        name: 'Finland',
        description: 'Finland is a country in Europe that is located in the southern part of Europe.',
        imageUrl: img2,
    },
    {
        name: 'Ireland',
        description: 'Ireland is a country in Europe that is located in the southern part of Europe.',
        imageUrl: img3,
    },
    {
        name: 'United Kingdom',
        description: 'United Kingdom is a country in Europe that is located in the southern part of Europe.',
        imageUrl: img4,
    },
    {
        name: 'Netherlands',
        description: 'Netherlands is a country in Europe that is located in the southern part of Europe.',
        imageUrl: img5,
    },
    {
        name: 'Italy',
        description: 'Italy is a country in Europe that is located in the southern part of Europe.',
        imageUrl: img6,
    },
];

const Slider: React.FC = () => {
    return (
        <>
            <div className={styles.customContainer}>
                <div className={styles.slide}>
                    {slides.map((slide, index) => (
                        <div className={styles.item} key={index} style={{ backgroundImage: `url(${slide.imageUrl})` }}>
                            <div className={styles.content}>
                                <div className={styles.name}>{slide.name}</div>
                                <div className={styles.des}>{slide.description}</div>
                                <button>See More</button>
                            </div>
                        </div>
                    ))}
                </div>

                <div className={styles.button}>
                    <button className={styles.prev}>
                        next
                    </button>
                    <button className={styles.next}>
                        prev
                    </button>
                </div>
            </div>

        </>
    )
}

export default Slider

Can you tell me where I'm going wrong? A thousand thanks

I would like the images set as background to be protected without loading the page and then, with the js code the main block image needs to change.`