unable to scroll PanGestureHandler

I am using a Modal to open a PanGestureHandler (UserInfoContainer) for animation. The PanGestureHandler loads but the initial height expands to almost the full page and I cannot scroll it down using the white bar. How can I fix this?

export const UserInfoContainer: React.FC<PanGestureProps> = ({ firstName, rating, numberOfFriends }) => {  const dragY = useRef(new Animated.Value(0));  const onGestureEvent = Animated.event(    [{ nativeEvent: { translationY: dragY.current } }],    {      useNativeDriver: true,    },  );  const onHandleStateChange = (event: any) => {    if (event.nativeEvent.oldState === State.ACTIVE) {      dragY.current.extractOffset();    }  };  const animateInterpolation = dragY.current.interpolate({    inputRange: [-SCREEN_HEIGHT + SCREEN_HEIGHT / 4 + SCREEN_HEIGHT / 10, 0],    outputRange: [-SCREEN_HEIGHT + SCREEN_HEIGHT / 4 + SCREEN_HEIGHT / 10, 0],    extrapolate: 'clamp',  });  const animatedStyles = {    transform: [      {        translateY: animateInterpolation,      },    ],  };  const whitelistBarMarginInterpolation = dragY.current.interpolate({    inputRange: [-SCREEN_HEIGHT + SCREEN_HEIGHT / 3, 0],    outputRange: [0, moderateScale(150)],    extrapolate: 'clamp',  });  const whitelistBarStyles = {    transform: [      {        translateY: whitelistBarMarginInterpolation,      },    ],  };  return (<PanGestureHandler      onGestureEvent={onGestureEvent}      onHandlerStateChange={onHandleStateChange}><Animated.View        style={[          styles.container,          animatedStyles,          /* { transform: [{ translateY: dragY.current }] } */        ]}><SwipeBar /><View style={styles.introContainer}><Text style={styles.name}>            {firstName}</Text><Animated.View style={[styles.whitelistBar, whitelistBarStyles]}></Animated.View></Animated.View></PanGestureHandler>  );};

The white background is from the modal. The greyish one is the pan gesture handler.