how to make a setState operation based on new Value(0)

[Bayramito]

Hi,

I'm beginner on reanimated api. So from a tutorial i made this code below. What i am trying to do is, when the state ends i want to set the current value of the index to the parent component's state.

More explanation,
This is a slider with PanGestureHandler, so i have a sider with number from 1 to 10, and after i slide to a number i want to set its number to a state. but its not working

import React from "react";
import {StyleSheet} from "react-native";
import {PanGestureHandler, State} from "react-native-gesture-handler";
import Animated, {add, call, concat, cond, divide, eq, set, useCode, useValue, Value} from "react-native-reanimated";
import {clamp, onGestureEvent, ReText, round, snapPoint, timing} from "react-native-redash";
import {textStyles} from "../../../../assets/styles/main";

const SlideCursor = ({x, count, size, setUserRate, rate}) => {
  const snapPoints = new Array(count).fill(0).map((e, i) => i * size);
  const index = add(round(divide(x, size)), 1);
  const translationX = useValue(0);
  const velocityX = useValue(0);
  const state = new Value(State.UNDETERMINED);
  const offset = useValue(0);
  const gestureHandler = onGestureEvent({state, translationX, velocityX});
  const value = add(offset, translationX);
  const translateX = clamp(
    cond(eq(state, State.END), set(offset, timing({from: value, to: snapPoint(value, velocityX, snapPoints)})), value),
    0,
    (count - 1) * size,
  );

  useCode(
    () => [
      set(x, translateX),
      cond(eq(state, State.END), [
        call([index], (i) => {
          setUserRate(i);
        }),
      ]),
    ],
    [x, translateX],
  );

  return (
    <PanGestureHandler {...gestureHandler}>
      <Animated.View
        style={{
          width: size + 10,
          height: size + 10,
          borderRadius: (size + 10) / 2,
          backgroundColor: "white",
          shadowColor: "#000",
          shadowOffset: {
            width: 0,
            height: 2,
          },
          shadowOpacity: 0.25,
          shadowRadius: 3.7,
          elevation: 5,
          justifyContent: "center",
          alignItems: "center",
          transform: [{translateX}],
        }}
      >
        <ReText style={[textStyles().boldExtra, textStyles().fontSize14]} text={concat(index)} />
      </Animated.View>
    </PanGestureHandler>
  );
};

export default SlideCursor;

const styles = StyleSheet.create({});

tutiorial that i followed is : here