React native – Upgrading to the latest Expo SDK 52 with dependencies issue

As per Expo documentation, to upgrade to latest SDK I need to first upgrade the SDK with npm install expo@latest and then upgrade the dependencies with npx expo install --fix, currently I am running SDK 51 with below dependencies, in this the expo upgraded command runs successfully and then when I try to upgrade the dependencies it throws an error.

  npm ERR! code ERESOLVE
  npm ERR! ERESOLVE could not resolve
  npm ERR!
  npm ERR! While resolving: [email protected]
  npm ERR! Found: @react-navigation/[email protected]
  npm ERR! node_modules/@react-navigation/drawer
  npm ERR!   @react-navigation/drawer@"^6.7.2" from the root project
  npm ERR!
  npm ERR! Could not resolve dependency:
  npm ERR! peerOptional @react-navigation/drawer@"^7.0.0" from [email protected]
  npm ERR! node_modules/expo-router
  npm ERR!   expo-router@"~4.0.7" from the root project
  npm ERR!
  npm ERR! Conflicting peer dependency: @react-navigation/[email protected]
  npm ERR! node_modules/@react-navigation/drawer
  npm ERR!   peerOptional @react-navigation/drawer@"^7.0.0" from [email protected]        
  npm ERR!   node_modules/expo-router
  npm ERR!     expo-router@"~4.0.7" from the root project
  npm ERR!
  npm ERR! Fix the upstream dependency conflict, or retry
  npm ERR! this command with --force or --legacy-peer-deps
  npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
  npm ERR!
  npm ERR! 
  npm ERR! For a full report see:
  npm ERR! C:UsersIsmailAppDataLocalnpm-cache_logs2024-11-21T04_03_35_490Z-eresolve-report.txt

  npm ERR! A complete log of this run can be found in:
  npm ERR!     C:UsersIsmailAppDataLocalnpm-cache_logs2024-11-21T04_03_35_490Z-debug-0.log
  Error: npm install exited with non-zero code: 1

I also tried upgrading the dependencies manually one by one, none of the npm install commands work and it throws the same error.

package.json

        {
      "name": "m24",
      "version": "1.0.0",
      "main": "expo-router/entry",
      "scripts": {
        "start": "expo start",
        "android": "expo start --android",
        "ios": "expo start --ios",
        "web": "expo start --web"
      },
      "dependencies": {
        "@gorhom/bottom-sheet": "^5.0.2",
        "@react-native-async-storage/async-storage": "1.23.1",
        "@react-navigation/drawer": "^6.7.2",
        "@reduxjs/toolkit": "^2.2.8",
        "axios": "^1.7.7",
        "expo": "~51.0.39",
        "expo-constants": "~17.0.3",
        "expo-document-picker": "~13.0.1",
        "expo-linking": "~7.0.3",
        "expo-localization": "~16.0.0",
        "expo-router": "~4.0.7",
        "expo-secure-store": "~14.0.0",
        "expo-status-bar": "~2.0.0",
        "nativewind": "^2.0.11",
        "react": "18.3.1",
        "react-native": "0.76.2",
        "react-native-element-dropdown": "^2.12.1",
        "react-native-gesture-handler": "~2.20.2",
        "react-native-reanimated": "~3.16.1",
        "react-native-safe-area-context": "4.12.0",
        "react-native-screens": "~4.1.0",
        "react-redux": "^9.1.2",
        "swr": "^2.2.5"
      },
      "devDependencies": {
        "@babel/core": "^7.20.0",
        "tailwindcss": "^3.3.2"
      },
      "private": true
    }