I'm trying to create my own react carousel. Due to the type of animations I wish to achieve, I do need to create it myself.
I´m trying to do it based on a dynamically controlled array so it looks like and infinite carousel.
The problem I´m facing is, react won't render new components.
My code:

const imagesList = [hero1, hero2, hero3, hero4]; // 4 local images

const CoolCarousel = () => {
  const [current, setCurrent] = useState(0);
  const list = [...imagesList, ...imagesList];
  
  return (
    <ul>
      {[list[current], list[current+1], list[current+2] , list[current+3]].map((image, key, listRef) => {
        const cachedCurrent = useMemo(() => current, []);

        return <li key={`hero_${cachedCurrent+key}_${cachedCurrent}`}><Image src={image} /></li>
      }
    </ul>)
  }

Does anyone have any idea on how to make it work? My guess is I´m not generating these keys correctly, but I don´t know how to fix it yet.