Drawer animation in React Native

Question

I am trying to make a drawer animation like the one in this image using the useDrawerProgress function but I keep on getting this error:

Here is my code:

const Drawer = createDrawerNavigator();

const DrawerScreenContainer = ({children}) => {
    const progress = useDrawerProgress();
    
    const scale = Animated.interpolateNode(progress, {
      inputRange: [0, 1],
      outputRange: [1, 0.8],
    });
    const borderRadius = Animated.interpolateNode(progress, {
      inputRange: [0, 1],
      outputRange: [0, 25],
    });
    return (
      <Animated.View
        style={{
          flex: 1,
          backgroundColor: COLORS.white,
          borderRadius,
          transform: [{scale}],
          overflow: 'hidden',
        }}>
        {children}
      </Animated.View>
    );
  };

And this is the package.json

{
  "name": "eats",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@react-navigation/drawer": "^6.5.6",
    "@react-navigation/native": "^6.1.1",
    "expo": "~47.0.9",
    "expo-status-bar": "~1.4.2",
    "react": "18.1.0",
    "react-native": "0.70.5",
    "react-native-gesture-handler": "^2.8.0",
    "react-native-reanimated": "^2.13.0",
    "react-native-safe-area-context": "4.4.1",
    "react-native-screens": "~3.18.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9"
  },
  "private": true
}

How do I solve this?

Many thanks...