[Help] Animation resetting if the state was generated with a for cycle

Questions
, , ,
1

To have less repeatability I want to generate a state using a for loop but when ever I call the animation it plays once and then the object disappears while other objects with states that are defined regularly work just fine. Anyone have any idea why that happens?
Code segment down below with a video demo example at the end.

 //for loop generated state
 let samsung870SlotsBIG = []
 for (let i = 1; i < 12; i++) {
   samsung870SlotsBIG.push({
     samsung870SlotsBIGid: "Slot" + i,
     slot: false
   })
 }
const [Samsung870EVOBIGs, setSamsung870EVOBIGs] = useState(samsung870SlotsBIG)

//regularly generated state
 const [RTX3070MEDMB, setRTX3070MEDMB] = useState(false)

//down below i send them using context
<AnimationContext.Provider
value={{Samsung870EVOBIGs: Samsung870EVOBIGs, setSamsung870EVOBIGs:setSamsung870EVOBIGs,
RTX3070MEDMB: RTX3070MEDMB, setRTX3070MEDMB: setRTX3070MEDMB}}
//here is where i play the animation
   <MainView />
</AnimationContext.Provider>
<AnimationContext.Provider
value={{Samsung870EVOBIGs: Samsung870EVOBIGs, setSamsung870EVOBIGs:setSamsung870EVOBIGs,
RTX3070MEDMB: RTX3070MEDMB, setRTX3070MEDMB: setRTX3070MEDMB}}
//here its where the trigger happens
   <Collection />
</AnimationContext.Provider>

//In collection or more accurately a few components down i have the logic
const changeStateEVO = (id, next) => {
    setSamsung870EVOBIGs(Samsung870EVOBIGs.map(ssd => {
      if (ssd.samsung870SlotsBIGid === id) {
        return { ...ssd, slot: next }
      } else {
        return ssd
      }
    }))
  }

<div className={(evo870box) ? "visible" : "hidden"}>
          {Samsung870EVOBIGs.map((e) => (
            <button id={e.samsung870SlotsBIGid} onClick={() => changeStateEVO(e.samsung870SlotsBIGid, !e.slot)} type='button'>{e.samsung870SlotsBIGid}</button>
          ))}
</div>

//and in main view or child of it im playing the animation
const playAnimation = (anime) => {
    anime.loop = 0
    anime.repetitions = 0
    anime.play()
    anime.clampWhenFinished = true
  }

//a better solution for this would be welcome aswell instead of checking all of the objects in the array
if (Samsung870EVOBIGs[0].slot == true) {
      playAnimation(actions.Samsung870EVOSlot1Front)
    } else {
      actions.Samsung870EVOSlot1Front.stop()
    }

Video demo