decrease the initial height of animation

By using a react native Modal, I open a PanGestureHandler that is present within the UserInfoContainer component for animation. The panhandler opens up when but the initial height covers almost the full screen. How can I reduce the height of the entire handler? This code is also used on another screen but the length /height is automatically different. How can I fix this?

export const UserInfoContainer: React.FC<PanGestureProps> = ({ firstName}) => {  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,        ]}><SwipeBar /><View><Text>            {firstName}</Text><Animated.View style={[styles.whitelistBar, whitelistBarStyles]}></Animated.View></Animated.View></PanGestureHandler>  );};