Primereact Galleria. Undefined Variable after last image

Question

I'm getting Cannot read properties of undefined (reading 'itemImageSrc') error after the last image. Here is my code

const carousel = () => {
  const [images, setImages] = useState(null);
  useEffect(() => {
    setImages([
        {
            "itemImageSrc": '/src/assets/img/shett.png', 
        },
        {
            "itemImageSrc": '/src/assets/img/shett2.png', 
        },
        {
            "itemImageSrc": '/src/assets/img/shett3.png', 
        }
    ])
  }, [])

  const itemTemplate = (item) => {
    console.log(item)
    return (
        
        <div className="p-galleria">
            <img src={`${item.itemImageSrc}`} onError={(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'}  style={{ width: '100%' }} />
        </div>
    )}

  return (
        <>  
            <div className="card">
                <Galleria autoPlay  showThumbnails={false} value={images} item={itemTemplate} > </Galleria>
            </div>  
        </>
  )
}

It seems like the Galleria is not looping from first element.

Answer 1

Its a bug: https://github.com/primefaces/primereact/issues/3973

And it will be fixed in 8.7.4: https://github.com/primefaces/primereact/pull/3974