state change with data image whacks the xy cursor of the zoom, also the prev, next button does not work

[mguomanila]

when i tried to make a state change to the data image, bec the image data is mostly coming from a backend call, the xy cursor of the zoom function has become not aligned with the image, also the prev, next button will not work

pls find code below added to SliderImage.examples.md :

import {useState, useEffect} from 'react';
import SliderImage from 'react-zoom-slider';

const data = [{
  image: 'https://cdn.tgdd.vn/Products/Images/42/209800/oppo-reno2-f-xanh-1-org.jpg',
  text: 'img1'
}, {
  image: 'https://cdn.tgdd.vn/Products/Images/42/209800/oppo-reno2-f-xanh-4-org.jpg',
  text: 'img2'
}, {
  image: 'https://cdn.tgdd.vn/Products/Images/42/209800/oppo-reno2-f-xanh-10-org.jpg',
  text: 'img3'
}, {
  image: 'https://cdn.tgdd.vn/Products/Images/42/210653/iphone-11-pro-max-256gb-mau-bac-1-org.jpg',
  text: 'img4'
}, {
  image: 'https://cdn.tgdd.vn/Products/Images/42/210653/iphone-11-pro-max-256gb-mau-bac-6-org.jpg',
  text: 'img5'
}, {
  image: 'https://cdn.tgdd.vn/Products/Images/42/221926/huawei-y6p-xanh-1-org.jpg',
  text: 'img6'
}, {
  image: 'https://cdn.tgdd.vn/Products/Images/42/221926/huawei-y6p-xanh-10-org.jpg',
  text: 'img7'
}, {
  image: 'https://cdn.tgdd.vn/Products/Images/42/221926/huawei-y6p-xanh-12-org.jpg',
  text: 'img8'
}, ];

function Test(props){
  const [myData, setData] = useState([{image: ''}])
  
  useEffect(() => {
    setData(data.map(el => ({image: el.image, })))
  }, [])
  
  return (
    <SliderImage data={myData} width="500px" showDescription={true} direction="right" />
  )
}

<Test />

[mguomanila]

..the solution is so simple....i dont know if the developer just forget this??
just add '[data]' into the useEffect, and useCallback function of the 'SliderImage.js' file in the source folder...then the zoom image and prev, next button will all work fine.