My Expo App crashes when i call useDrawerProgress() hook from @react-navigation/drawer


I have a Bottom tab navigator nested in a Drawer navigator and I’m trying to create this drawer UI in an app.
Click here to view image

I used the “useDrawerStatus” hook from “@react-navigation/drawer” to create a ternary statement that changes an animated shared value (code is shown below). The issue with this method is that it only starts the animation after the drawer status changes, but I would like the animation to start as soon as the user starts opening the drawer.

One way I can do this is by using the “useDrawerProgress” hook from @react-navigation/drawer in the component, but the app crashes when I do.

Here’s a snippet of the component using “useDrawerSatus”

const BottomTabNavigator = () => {
    const isDrawerOpen = useDrawerStatus() === 'open'
    const animatedValue = useSharedValue(1)
     // const progress = useDrawerProgress()   Calling this hook crashes the app

    useEffect(() => {
        animatedValue.value = withTiming(isDrawerOpen ? 0.6 :1 , {duration:250, easing:Easing.ease}) 
    }, [isDrawerOpen]);

    const animatedStyle = useAnimatedStyle(() => ({
        transform: [{ scale: animatedValue.value}]
    return (
        <Animated.View style={[animatedStyle, { flex: 1 }]}>
            <Navigator screenOptions={{ headerShown: false }} tabBar={(props) => <BottomTabBar {...props} />} >
                <Screen name='home' component={BottomTabsHome} />
                <Screen name='favorite' component={BottomTabsFavourite} />
                <Screen name='profile' component={BottomTabsProfile} />
                <Screen name='cart' component={BottomTabsCart} />

Github link