Multiple vulnerabilities in new CRA app , but the suggested "npm fix" is questionable

I ran npx create-react-app project-a for my project and right away i found 27 vulnerabilities (16 moderate, 9 high, 2 critical) in my console.

As new developer this looks very scary, so i ran npm audit fix and noticed that many of them are related to Regular Expression stuff in browserslist , the npm audit fix didnt do anything, i still have 27 vulnerabilities.

After a bit of googling i found this closed github issue where the solution is apparently to move react-scripts to devDependencies ( that didnt remove the warnings ).

These warnings are false positives. There are no actual vulnerabilities affecting your app here. To remove npm audit warnings, move react-scripts from dependencies to devDependencies in your package.json.

I found another github issue and someone said to add this to my package.json to change the version of the sub-dependency because react-dev-utils package uses a vulnerable version (7.0.9) of immer as a dependency ( it didnt fix it ).

 "resolutions": {
    "immer": "9.0.7",
    "ansi-html": "https://registry.yarnpkg.com/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
    "ansi-regex": "5.0.1",
    "nth-check": "2.0.1",
    "glob-parent": "6.0.1",
    "browserslist": "4.18.1"
 }

At the very end of the audit it was suggested to run npm audit fix --force and that it includes breaking changes ! very-scary.

The breaking changes were this pretty much :

PS G:\Workspaces\React\project-a> npm audit fix --force
npm WARN using --force Recommended protections disabled.
npm WARN audit Updating react-scripts to 0.9.5,which is a SemVer major change.

Big jump right there from version 4.0.3 down to 0.9.5 and of course it resulted in 43 vulnerabilities , and it suggested running npm audit fix --force yet again to go back to 4.0.3, so i did :

npm WARN audit Updating react-scripts to 4.0.3,which is a SemVer major change.

It's an infinite loop , going back and fourth between react-scripts 0.9.5 and 4.0.3 .

My Node version is : 16.13.1

My NPM version is : 8.1.2

I dont have CRA installed globally.

My Package.json :

{
  "name": "project-a",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/css": "^11.5.0",
    "@emotion/react": "^11.7.0",
    "@emotion/styled": "^11.6.0",
    "@mui/icons-material": "^5.2.1",
    "@mui/material": "^5.1.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "styled-components": "^5.3.3"
  },
  "devDependencies": {
    "react-scripts": "^4.0.3"
  },
  "resolutions": {
    "immer": "9.0.7",
    "ansi-html": "https://registry.yarnpkg.com/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
    "ansi-regex": "5.0.1",
    "nth-check": "2.0.1",
    "glob-parent": "6.0.1",
    "browserslist": "4.18.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}