how to animate each datapoint in linear chart based on their position - react-native

Question

I am trying to translate the x and y of each data point on the linear chart according to their position but I am always getting the position of the last item in the animation and if I try to save positions inside the component using usestate of parent, animations doesn't work correctly
const chart = useRef(null)
const dot = useRef()
const ax = new Animated.Value(0)
const ay = new Animated.Value(0)
const [pos, setPos] = useState([])
const [animateIndex, setAnimateIndex] = useState(0)
useEffect(() => {
dot.current.animateDot()
}, [animateIndex])
<LineChart
ref={chart}
data={{
datasets: [
{
data: [
3.5, 5, 5.5, 6.5, 7.2, 8, 8.7
]
}
]
}}
renderDotContent={({ x, y, index, }) =>
<Dot //want to save x and y of each dot
ref={dot}
x={x}
y={y}
index={index}
key={index}
ax={ax}
ay={ay}
setPos={setPos}
pos={pos}
animateIndex={animateIndex}
hiden={hiden}
setHiden={setHiden} />
}
xLabelsOffset={-8}
width={SIZES.width * 0.84}
height={SIZES.height * 0.20}
yAxisSuffix="k"
withVerticalLines={false}
yAxisInterval={1}
/>
dot component
const Dot = ({ x, y, index, hiden, setHiden, ax, ay, animateIndex, setPos, pos }, ref) => {
useImperativeHandle(ref, () => ({
// methods connected to `ref`
animateDot: () => { animateDot() }
}))
const animateDot = () => {
console.log('animate dot function', index, posi)
Animated.timing(ax, {
toValue: SIZES.width / 1.3 - x,
duration: 1000,
useNativeDriver: true
}).start()
Animated.timing(ay, {
toValue: -SIZES.height / 2 + y,
duration: 1000,
useNativeDriver: true
}).start()
}
return (
<Animated.View
style={{
position: 'absolute',
top: y - 7.5,
left: x - 7.5,
height: 15,
width: 15,
borderRadius: 10,
transform: [
{
translateY: (animateIndex === index) ? ay : 0
},
{
translateX: (animateIndex === index) ? ax : 0
}
],
borderWidth: 3.5,
borderColor: COLORS.primary,
backgroundColor: COLORS.secondary
}}>
</Animated.View>
)
}
export default forwardRef(Dot)
how can i save positions of each item