React native gesture handler - element jumping when adjusting the dragging multiple times - react-native

Question

I build slider for my project, the slider works fine but every time that I adjusting the dragging (with the Circle element) the circle jumps to his initial state let translateX = sub(x, 50 / 2);
Please help me understand what I need to add in order that the circle will continue from his last place.
I tried to overwrite translateX in onDrop function but it's not working ->
() =>
cond(
eq(state, State.ACTIVE),
call([translateX], ([v]) => {
onDrop(v);
}),
),
[state, value],
);
const onDrop = (e) => {
const diff = e - -firstNumber;
const lastOption = diff * offSet;
setTextValue((lastOption / 10).toFixed(2));
};
my code:
const width = Dimensions.get('window').width
const SLIDER_WIDTH = width - 200;
let offSet = 1000 / SLIDER_WIDTH;
let firstNumber = SLIDER_WIDTH - 25;
const [state, translationX] = useValues(
State.UNDETERMINED,
(-SLIDER_WIDTH + 100) / 2,
);
const gestureHandler = onGestureEvent({state, translationX});
const x = diffClamp(withOffset(translationX, state), -SLIDER_WIDTH + 50, 50);
let translateX = sub(x, 50 / 2);
const [textValue, setTextValue] = useState(50);
const value = round(multiply(divide(x, SLIDER_WIDTH), 100));
useCode(
() =>
cond(
eq(state, State.ACTIVE),
call([translateX], ([v]) => {
onDrop(v);
}),
),
[state, value],
);
const onDrop = (e) => {
const diff = e - -firstNumber;
const lastOption = diff * offSet;
setTextValue((lastOption / 10).toFixed(2));
};
return (
<View>
<PanGestureHandler
minDist={0}
{...gestureHandler}
onHandlerStateChange={chosenValue}>
<Animated.View
style={{
position: 'absolute',
top: 0,
left: 0,
width: CIRCLE_SIZE,
height: CIRCLE_SIZE,
transform: [{translateX}],
}}>
<Animated.View
style={{
...StyleSheet.absoluteFillObject,
}}>
<Circle {...{state}} />
</Animated.View>
</Animated.View>
</PanGestureHandler>
</View>
);
Thanks in advance.