Tengo una aplicación React con una animación basada en una matriz. Necesito mostrar la matriz de elementos en un movimiento circular pero, al mismo tiempo, los elementos deben seleccionarse al azar con un peso de probabilidad.

Los elementos son algo como:

 const el = [ { id: 1, prob: 0.04, flag: 'US', text: 'whatever', }, { id: 2, prob: 0.22, flag: 'FR', text: 'whatever', }, ... ]

Selecciono el elemento aleatorio para mostrar de la siguiente manera:

 const interval = setInterval(() => { let arrayOfProbabilities = filteredCountryByYear.flatMap( (i) => i.prob ); const testarray = []; for (let i = 0; i < 24; i++) { testarray.push( weightedRandom(filteredCountryByYear, arrayOfProbabilities) ); } const globeSpinningCountriesClone = [...testarray]; globeSpinningCountriesClone.shift(); globeSpinningCountriesClone.push( weightedRandom(filteredCountryByYear, arrayOfProbabilities) ); setGlobeSpinningCountries(globeSpinningCountriesClone); }, 2000); return () => clearInterval(interval);

Básicamente, inicializo el elemento con 24 elementos seleccionados al azar obtenidos de la función weightedRandom , ya que la animación requiere que siempre se muestren 24 elementos. Después de eso, cambio la matriz (borrando el primer elemento) y empujo uno nuevo. La variable globeSpinningCountries se pasa al componente de animación como accesorio.

El problema es que cada vez que actualizo la matriz, el componente de animación se vuelve a renderizar y la animación tiene una actualización visual y comienza desde el principio, me gustaría que la animación continúe, solo que con un elemento diferente cada vez.

Este es el componente de animación:

 <div tw="w-full h-full absolute animate-spin"> {globeSpinningCountries.map(({ file_url, sector }, i) => ( <> <DynamicSvg globeSpinningCountries={globeSpinningCountries} i={i} iconName={sector} /> <img // key={i} src={file_url} css={[ tw`bottom-[50%] origin-[center bottom] absolute object-contain object-[0 0] h-[calc(62.125rem - 57%)] w-[1.56rem] left-[50%] md:w-[0.875rem] md:h-[calc(35.75rem - 57%)]`, `transform: translate(-50%) ${calculateDegrees( 24, i )}`, ]} alt="Country" /> </> ))} </div>

Este div muestra los elementos alrededor de un globo y los hace rotar.

¿Hay una manera de lograr esto?