Pan Responder with transform not working in Android react native?

Problem:

In my react native app I have created an animation like tinder cards. It is working correctly in Ios but in Android Animated view which has panResponder and transform even does not render in the view . This is how I have organized my code.

const TinderCardAnimation = ({ theme, data, onHeartClick }) => {

    const { width, height } = useWindowDimensions();
    const [currentIndex, setCurrentIndex] = useState(0);
    const pan = useRef(new Animated.ValueXY()).current;
    const rotate = pan.x.interpolate({
        inputRange: [-width / 2, 0, width / 2],
        outputRange: ['-10deg', '0deg', '10deg'],
        extrapolate: 'clamp'
    })

    const rotateAndTranslate = {
        transform: [{
            rotate: rotate
        },
        ...pan.getTranslateTransform()
        ]
    }

    const likeOpacity = pan.x.interpolate({
        inputRange: [-width / 2, 0, width / 2],
        outputRange: [0, 0, 1],
        extrapolate: 'clamp'
    })
    const nopeOpacity = pan.x.interpolate({
        inputRange: [-width / 2, 0, width / 2],
        outputRange: [1, 0, 0],
        extrapolate: 'clamp'
    })
    const panResponder = useRef(
        PanResponder.create({
            onMoveShouldSetPanResponder: () => true,
            onStartShouldSetPanResponder: (evt, gestureState) => true,
            onStartShouldSetPanResponderCapture: (evt, gestureState) =>
                true,
            onMoveShouldSetPanResponderCapture: (evt, gestureState) =>
                true,
            onPanResponderTerminationRequest: (evt, gestureState) =>
                true,
            onPanResponderGrant: () => {
                pan.setOffset({
                    x: pan.x._value,
                    y: pan.y._value
                });
            },
            onPanResponderMove: (evt, gestureState) => {
                pan.setValue({
                    x: gestureState.dx,
                    y: gestureState.dy
                })
            },
            onPanResponderRelease: () => {
                pan.flattenOffset();
            },
            onShouldBlockNativeResponder: (evt, gestureState) => {
                // Returns whether this component should block native components from becoming the JS
                // responder. Returns true by default. Is currently only supported on android.
                return true;
            }
        })
    ).current;



    return <View style={{ backgroundColor: '#ffffff' }}>{data?.map((item, index) => {
        if (index < currentIndex) {
            return null
        } else if (index == currentIndex) {
            return (<Animated.View {...panResponder.panHandlers} key={index} style={[rotateAndTranslate, { height: height / 5, width: width, padding: 10, position: 'absolute' }]}>
                <Animated.View
                    style={{
                        opacity: likeOpacity,
                        transform: [{ rotate: "-30deg" }],
                        position: "absolute",
                        top: 50,
                        left: 40,
                        zIndex: 1000
                    }}
                >
                    <TouchableOpacity >
                        <Image style={{ marginTop: height / 4 }} source={require("_assets/images/XCircleb.png")} />
                    </TouchableOpacity>
                </Animated.View>
                <Animated.View
                    style={{
                        opacity: nopeOpacity,
                        transform: [{ rotate: "30deg" }],
                        position: "absolute",
                        top: 50,
                        right: 40,
                        zIndex: 1000
                    }}
                >
                    <TouchableOpacity onPress={() => onHeartClick(item?.id)}>
                        <Image style={{ marginTop: height / 4 }} source={require("_assets/images/HCircleb.png")} />
                    </TouchableOpacity>

                </Animated.View>
                <ProfileCard key={index} profile={item} />
            </Animated.View>)
        } else {
            return (<Animated.View key={index} style={{ height: height / 5, width: width, padding: 10, position: 'absolute' }}>
                <ProfileCard key={index} profile={item} />
            </Animated.View>)
        }
    }).reverse()}
    </View >
}

export default withTheme(TinderCardAnimation);

I tried a lot to make it work in Android. But I was unable to do so. Can someone help me to solve this issue? Thank you