Updating props
Lightbox is not reactive to props changes other than toggler and slide controls. To update them you need to remount lightbox. In most cases best solution is to use React key prop, after updating it React remounts component.
Example with updating sources:
function App({ productsImages }) {
const [toggler, setToggler] = useState(false);
const [productIndex, setProductIndex] = useState(0);
return (
<>
<button onClick={() => setToggler(!toggler)}>
Toggle Lightbox
</button>
<button onClick={() => setProductIndex(1)}>
Load second product
</button>
<FsLightbox
toggler={toggler}
sources={productsImages[productIndex]}
key={productIndex}
/>
</>
);
}
const [toggler, setToggler] = useState(false);
const [productIndex, setProductIndex] = useState(0);
return (
<>
<button onClick={() => setToggler(!toggler)}>
Toggle Lightbox
</button>
<button onClick={() => setProductIndex(1)}>
Load second product
</button>
<FsLightbox
toggler={toggler}
sources={productsImages[productIndex]}
key={productIndex}
/>
</>
);
}