React-native: prevent Swipeable component swipe to outside the screen

Question

I have a screen that show chat messages, and I make the item chat able to swipe to reply like FB Messenger. I'm using Swipeable component from react-native-gesture-handler. But I have a troble: whenever I swipe fastly, the item will swipe to outside the screen like this: https://i.stack.imgur.com/uIEWN.png How can I fix it? My code for Swipeable Item:

<Swipeable
          failOffsetX={
            !isMyMessage ? [0, SCREEN_WIDTH / 3] : [-SCREEN_WIDTH / 2, 0]
          }
          ref={swipeableRef}
          friction={2}
          enableTrackpadTwoFingerGesture
          renderLeftActions={renderSwipeableActions }
          renderRightActions={renderSwipeableActions }
          onSwipeableClose={onSwipeableClose}
          onSwipeableOpen={() => {}} />

And this one for render UI when swipe action activate :

const renderSwipeableActions = (
    _progress: Animated.AnimatedInterpolation,
    dragX: Animated.AnimatedInterpolation,
  ) => {
    const transformLeft = dragX.interpolate({
      inputRange: [0, 50, 100, 101],
      outputRange: [-20, 0, 0, 1],
      extrapolate: 'clamp',
    });
    const transformRight = dragX.interpolate({
      inputRange: [0, 50, 100, 101],
      outputRange: [1, 0, 0, -20],
      extrapolate: 'clamp',
    });
    return (
      <RectButton
        style={{
          flex: 1,
          alignItems: !isMyMessage ? 'flex-start' : 'flex-end',
        }}>
        <Animated.View
          style={[
            {
              transform: [
                {translateX: !isMyMessage ? transformLeft : transformRight},
              ],
            },
          ]}>