I am trying to make a reusable carousel code, but when changing background its just not working

[hardy thorn]

To make it simpler, i will just skip the javascript part and the others that doesnt matter for the example, since the problem is on loading the html properly ( background image ).
Whats happening is, my carousel is setting the first slide background image properly, but all the other ones not, and i have no idea why. Some help would be much appreciated
All the images are on the same file, one below each other, so the problem isnt the path for them. Also, all other bindings inside my map is working for all slides inside my carousel properly.
I will put only 2 items inside my "slides" variable to make the example simpler.

---
import StandardButton from "./small-components/StandardButton.astro"

let slides = [
    {
        bgImage: '/images/team-1.webp',
        h1: 'Venda seus serviços <span class="text-primary-color">online</span>',
        paragrafo: 'Ao se tornar <span class="underline underline-offset-2 decoration-primary-color decoration-[3px] font-bold">parceiro</span> do nexo, você ganha um sistema completo para a gestão do seu escritório',
        labelBtn: 'VENHA PARA O DIGITAL'
    },
    {
        bgImage: '/images/team-2.webp',
        h1: '<span class="text-primary-color">Monetize</span> com seu próprio software',
        paragrafo: 'Ao se tornar <span class="underline underline-offset-2 decoration-primary-color decoration-[3px] font-bold">parceiro</span> do nexo, você ganha um sistema completo para a gestão do seu escritório',
        labelBtn: 'VENHA PARA O DIGITAL'
    },
]
---

{
                slides.map((item) => (
                    <div class="slide">
                        <div class:list={["w-full bg-no-repeat bg-cover h-full", `bg-[url('${item.bgImage}')]`]} style="box-shadow: inset 0 0 0 1000px rgba(0,0,0,.3);">
                            <div class="w-7/12 flex flex-col items-center justify-center mx-auto my-auto h-full">
                                <div class="w-full my-auto block">
                                    <h1 set:html={item.h1} class="text-[2.7rem] font-bold text-white mb-6 leading-[2.8rem] w-2/3"/>
                                    <p set:html={item.paragrafo} class="text-2xl items-left font-semibold text-slate-50 2xl:w-1/3 mb-12"/>
                                    <div class="bottom-0">
                                        <StandardButton label={item.labelBtn} className="text-xl py-4 px-6"></StandardButton>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                ))
            }

[white warren]

Maybe I'm a dummy and dont understand your class:list=, but this simpler syntax seems to work a-ok for me:

    slides.map((item) => (
      <div class="slide">
        <div class="w-full bg-fixed other-classes-here" style={`background-image: url(${item.bgImage})`}>hello... other nested divs here...</div>
      </div>
    ))
  }```