Custom Drawer using Reanimated 2 useSharedValue and useAnimatedStyle

Question

I am trying to implement drawing navigation like in the image above using react native reanimated 2.

import React, { useState } from 'react'
import { Text } from 'react-native'
import { createDrawerNavigator } from '@react-navigation/drawer'
import Animated, { useSharedValue, interpolate, useAnimatedStyle } from 'react-native-reanimated'

import Screen1 from '../screens/screen1'
import Screen2 from '../screens/screen2'
import Screen3 from '../screens/screen3'

const Drawer = createDrawerNavigator()

const DrawerNavigator = () => {

const [translateX, setTranslateX] = useState(new Animated.Value(0))
//const translateX = useSharedValue(0)

const scale = Animated.interpolateNode(translateX, {
    inputRange: [0, 1],
    outputRange: [1, 0.8],
});

// const animatedStyle = useAnimatedStyle(() => {
//     const scale = interpolate(
//         translateX.value,
//         [0, 1],
//         [1, 0.8]
//     );
//     return{ transform: [{ scale }] }
// })

const animatedStyle = { transform: [{ scale }] };

return (
    <Drawer.Navigator drawerContent={ (props) => {
            setTranslateX(props.progress)
            // translateX.value = props.progress
            return <Text>Hello madan</Text> 
        }} >
        <Drawer.Screen name="screen1">
            {() => <Screen1 style={ animatedStyle } />}
        </Drawer.Screen>
        <Drawer.Screen name="screen2" component={ Screen2 } />
        <Drawer.Screen name="screen3" component={ Screen3 } />
    </Drawer.Navigator>
)
}

I can achieved it by using code above. But, i am using Animated.Value. I want to use useSharedValue() and useAnimatedStyle hook from reanimated 2. I tried to implement that which can be seen in the code above which are commented. But, its not working. App crashes and give error in JSCRuntime file.