react-native-reanimated 2 - animation not working with React-Native Modal component

Question

I'm using from 'react-native, 'react-native-gesture-handler 2.14' and 'react-native-reanimated 3.6.2' to create a swipe-down-to-close modal.

Everything works except, I want it to ease back to 0 transformY if the user has not swiped far enough. But for some reason, none of the animation configs are working. Neither are the Easing options.

I have a suspicion that from 'react-native' is overriding the animation somehow. I have other components that are animated--no issues with them (I use Interpolation for those though).

// Drag/Pan gesture handler
const dragGesture = Gesture.Pan()
    .activeOffsetY(100) // How many pixels the user has to drag before we pick up the gesture--less reactive
    .enabled(isAtTop) // Will only listen to gestures if at top of page
    .onStart(() => {
        isDragging.value = true
    })
    .onUpdate((event) => {
        if (event.translationY >= 0) {
            translateY.value = event.translationY
        }
    })
    .onEnd((event) => {
        // If dragged down past the threshold, close the modal
        if (translateY.value > windowHeight / 2 || (event.velocityY > 500 && isAtTop)) {
            runOnJS(setModalVisible)(false) // Using runOnJS to call React state setter from Reanimated worklet
        } else {
            // If not dragged down enough, snap back to the original position
            translateY.value = withSpring(0, {
                damping: 20,
                stiffness: 90,
            })
        }
        isDragging.value = false
    })

const composedGestures = Gesture.Simultaneous(dragGesture, nativeGesture)

const modalAnimatedStyle = useAnimatedStyle(() => {
    console.log(translateY.value)
    return {
        transform: [{ translateY: translateY.value }],
    }
}, [translateY.value])

return (
    <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => {
            setModalVisible(!modalVisible)
        }}
        onDismiss={() => {
            translateY.value = 0 // Reset translateY to its initial value
        }}>
        <Animated.View style={[styles.modalView, modalAnimatedStyle]}>
            <HomeListingsExpanded
                navigation={navigation}
                route={{ params: { listing, timezoneData } }}
                setModalVisible={setModalVisible}
                setIsAtTop={setIsAtTop}
                composedGestures={composedGestures}
            />
        </Animated.View>
    </Modal>
)

}

I've been stuck for hours, so any help is appreciated. Thank you.