Left Right Buttons not working

[Hsay28]

Here is my code

const [currentImageIndex, setCurrentIndex] = useState(0);

const gotoPrevious = () =>
currentImageIndex > 0 && setCurrentIndex(currentImageIndex - 1);

const gotoNext = (GalleryImages: any) => {
console.log(currentImageIndex);
currentImageIndex + 1 < GalleryImages.length &&
setCurrentIndex(currentImageIndex + 1);
};

<Lightbox
isOpen={true}
className="bg-black/70"
onClose={() => setIsLightboxView(false)}
onNext={() => gotoNext(GalleryImages)}
onPrev={gotoPrevious}
singleClickToZoom
images={GalleryImages.map((photo: any) => ({
src: photo.src,
alt: photo.alt,
}))}
currentIndex={currentImageIndex}
renderPrevButton={() => (
<IoIosArrowBack
className={text-5xl text-primary absolute left-20 cursor-pointer}
/>
)}
renderNextButton={() => (
<IoIosArrowForward
className={text-5xl text-primary absolute right-20 cursor-pointer}
/>

[tim-soft]

could you make a codesandbox?

[paulopgss]

I really liked the lib, very easy to apply everything. So I will answer you because I went through the same problem, although I believe that by the time you must have already changed the lib or done something without the aid of a lib. The fact is that the z-index of the image is on the button, so you can not apply, check your css if you still use the lib that should already solve. Applying a z-index of 2 on the buttons worked for me. I hope I have helped and if other people go through the problem can consult this issue