NPM dependencies vs dev dependencies, how to decide?

After searching for a while I cannot seem to find a solid answer on npm dependencies vs dev dependencies. The opinions vary widely when it comes to this question.

In general I found the following answers, which all make sense to a certain degree:

1. Dependencies are what you absolutely need in a production build (e.g. axios, redux), other packages are dev dependencies (e.g. types, testing, typescript).
2. Dependencies are what you need to run the project locally in a development environment (i.e. typescript would be needed), only types and testing are dev dependencies.
3. Just follow the command on npmjs.com (if it uses --save-dev its a dev dependency)
4. Just put everything as a dependency as the build will only use what it needs

Now I'm wondering what the exact 'rules' are regarding this differences in layman's terms. For example, answer 1 could give errors with npm ci, while option 4 could theoretically increase the overall production size.

React Typescript package.json example

"dependencies": {
  "@testing-library/jest-dom": "^5.16.2",
  "@testing-library/react": "^12.1.2",
  "@testing-library/user-event": "^13.5.0",
  "@types/jest": "^27.4.0",
  "@types/node": "^16.11.22",
  "@types/react": "^17.0.39",
  "@types/react-dom": "^17.0.11",
  "react": "^17.0.2",
  "react-dom": "^17.0.2",
  "react-scripts": "5.0.0",
  "typescript": "^4.5.5",  
  "web-vitals": "^2.1.4"
},
"devDependencies": {}