Tried to synchronously call function {snapPoint} from a different thread

[khanhduy62]

Hi everybody
I'm the new one who want to learn reanimated. When i try to run codes i got an error

import React from 'react';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  useAnimatedGestureHandler,
  withDecay,
} from 'react-native-reanimated';
import {PanGestureHandler} from 'react-native-gesture-handler';
import {StyleSheet, SafeAreaView, Dimensions} from 'react-native';
import {clamp, snapPoint, timing} from 'react-native-redash/lib/module/v1';

const {width: SCREEN_WIDTH} = Dimensions.get('window');
const BOX_SIZE = 50;

function WithDecay() {
  const x = useSharedValue(0);
  const state = useSharedValue(0);
  const velocityX = useSharedValue();

  const gestureHandler = useAnimatedGestureHandler({
    onStart: (_, ctx) => {
      ctx.dkmX = x.value;
    },
    onActive: (event, ctx) => {
      x.value = ctx.dkmX + event.translationX;
    },
    onEnd: evt => {
      state.value = evt.state;
      velocityX.value = evt.velocityX;
      x.value = withDecay({
        velocity: evt.velocityX,
        clamp: [0, SCREEN_WIDTH - BOX_SIZE], // optionally define boundaries for the animation
      });
    },
  });

  const animatedStyle = useAnimatedStyle(() => {
    return {
      transform: [
        {
          translateX: x.value,
        },
      ],
    };
  });

  return (
    <SafeAreaView>
      <PanGestureHandler onGestureEvent={gestureHandler}>
        <Animated.View style={[styles.box, animatedStyle]} />
      </PanGestureHandler>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  box: {
    width: BOX_SIZE,
    height: BOX_SIZE,
    backgroundColor: 'red',
  },
});
export default WithDecay;

This code works correctly. But when I try to replace clamp: [0, SCREEN_WIDTH - BOX_SIZE] to clamp: snapPoint(x.value, evt.velocityX, [0, SCREEN_WIDTH - BOX_SIZE]) and then it throws an error "tried to synchoronously call function"

please help me