How to make compatible match between react and react native

I am facing a confusing situation:

This is my package.json settings

 "dependencies": {
    "@expo/metro-runtime": "~3.1.3",
    "@expo/vector-icons": "^14.0.0",
    "@react-navigation/native": "^6.1.17",
    "@react-navigation/native-stack": "^6.9.26",
    "@react-navigation/stack": "^6.3.29",
    "@rneui/themed": "^4.0.0-rc.8",
    "axios": "^1.6.8",
    "body-parser": "^1.20.2",
    "expo": "^51.0.0",
    "expo-auth-session": "~5.5.2",
    "expo-clipboard": "~6.0.3",
    "expo-image-picker": "~14.7.1",
    "expo-mail-composer": "^13.0.1",
    "expo-status-bar": "~1.11.1",
    "openai": "^4.40.1",
    "react-dom": "^18.2.0",        <=======
    "react": "18.2.0",              <=======
    "react-native": "0.74.1",        <=======
    "react-native-windows": "0.74.5",
    "react-native-paper": "^5.12.3",
    "react-native-picker-select": "^9.1.3",
    "react-native-web": "~0.19.6"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@testing-library/jest-native": "^5.4.3",
    "@testing-library/react-native": "^12.5.0",
    "@types/express": "^4.17.21",
    "@types/react": "~18.2.45",
    "jest": "^29.7.0",
    "typescript": "^5.1.3"
  },

and under this when I run npm install it would show me with

enter image description here

Then I change

 "dependencies": {
    "@expo/metro-runtime": "~3.1.3",
    "@expo/vector-icons": "^14.0.0",
    "@react-navigation/native": "^6.1.17",
    "@react-navigation/native-stack": "^6.9.26",
    "@react-navigation/stack": "^6.3.29",
    "@rneui/themed": "^4.0.0-rc.8",
    "axios": "^1.6.8",
    "body-parser": "^1.20.2",
    "expo": "^51.0.0",
    "expo-auth-session": "~5.5.2",
    "expo-clipboard": "~6.0.3",
    "expo-image-picker": "~14.7.1",
    "expo-mail-composer": "^13.0.1",
    "expo-status-bar": "~1.11.1",
    "openai": "^4.40.1",
    "react-dom": "^18.3.1",     <========
    "react": "18.3.1",          <========
    "react-native": "0.74.1",       <========
    "react-native-windows": "0.74.5",
    "react-native-paper": "^5.12.3",
    "react-native-picker-select": "^9.1.3",
    "react-native-web": "~0.19.6"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@testing-library/jest-native": "^5.4.3",
    "@testing-library/react-native": "^12.5.0",
    "@types/express": "^4.17.21",
    "@types/react": "~18.2.45",
    "jest": "^29.7.0",
    "typescript": "^5.1.3"
  },

then it shows to me enter image description here

Everytime I

1. delete package-lock.json and node_modules
2. run npm install

I know I can run npm install --legacy-peer-deps

I am totally confused.

• May be I am wrong, but I didn't find anything related to which version of react / react dom to be compitable with current react native (0.74.1).
• And I would like to ask what kind of negative influences it would have in the future if this is not resolved?

Thanks a lot!

https://react-native-community.github.io/upgrade-helper/

You can use this tool to check the compatible versions in the auto generated package.json