React Native Swipeable animation does not work - reactjs

Question

I am having this weird behavior with react-native-gesture-handler's Swipeable component. Intro animations don't work but after pressing the button in Swipeable component, animations work fading out. Here is my BookmarkItem component with Swipeable component:
renderLeftActions = (progress, dragX) => {
const trans = dragX.interpolate({
inputRange: [0, 50, 100, 101],
outputRange: [-20, 0, 0, 1],
});
const localStyles = {
rectButton: {
alignItems: "stretch",
justifyContent: "center",
},
icon: {
transform: [{ translateX: trans }],
paddingHorizontal: 20,
flexDirection: 'row',
alignItems: 'center',
height: '100%',
backgroundColor: 'rgba(0,0,0,0.1)'
},
};
return (
<RectButton
style={localStyles.rectButton}
onPress={() => {
this.props.removeFromBookmarks(this.props.title, this.props.p);
this.swipableRef?.current?.close();
}}
>
<Animated.View style={localStyles.icon}>
<Icon name="heart" size={35} color="rgb(245, 66, 66)" />
</Animated.View>
</RectButton>
);
};
render() {
return (
<Swipeable
ref={this.swipableRef}
renderLeftActions={this.renderLeftActions}
overshootLeft={false}
>
<TouchableOpacity onPress={this.onPress}>
<Text numberOfLines={2} style={styles.sectionText}>
{this.props.p}
</Text>
</TouchableOpacity>
</Swipeable>
);
}