Uncaught Error: Cannot find module '@fortawesome/free-regular-svg-icons'

I'm trying to use ReactJS with font-awesome but I am getting a module not found error. The files are in the npm modules folder so I'm not sure what is going wrong.

I have the following in my package.json:

{
  "name": "partner-portal",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.1.1",
    "@fortawesome/free-solid-svg-icons": "^6.1.1",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router": "^6.3.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "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"
    ]
  },
  "devDependencies": {
    "autoprefixer": "^10.4.7",
    "postcss": "^8.4.14",
    "tailwindcss": "^3.1.4"
  }
}

I have run the following commands, and the libraries have been added to my npm_modules folder:

yarn add @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
yarn add @fortawesome/react-fontawesome@latest
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons

But when I include it like this:

import { faBell } from "@fortawesome/free-regular-svg-icons"

function Form() {

    return(
        <div className='container w-[1000px] p-5 mx-auto border rounded-2xl'>
            <div className='flex flex-wrap'>
                <label className="mr-5">Name</label>
            </div>

            <div className='flex flex-row w-full justify-end'>
                <button className="pointer-events-auto ml-8 rounded-md bg-indigo-600 py-2 px-3 text-[0.8125rem] font-semibold leading-5 text-white hover:bg-indigo-500">
                    <FontAwesomeIcon icon={faBell} />
                    Save
                </button>
            </div>

        </div>
    )
}

export default Form;

I get the following error:

Uncaught Error: Cannot find module '@fortawesome/free-regular-svg-icons'
    webpackMissingModule bundle.js:214
    js bundle.js:214
    factory react refresh:6
    Webpack 11**

Can anyone tell me what Im doing wrong?

Edit:

I've moved on now and I'm trying to use ReactRouter, which I've installed using the following command npm i react-router. As you cas see from my updated package.json (above) I have react-dom, react-router, react-router-config, react-router-dom in there. I run npm install and get no problems. However when I try:

import {
    BrowserRouter as Router,
    Switch,
    Route,
} from "react-router"

I still get the same error. Uncaught Error: Cannot find module 'react-router' Again, the files are there in the node_modules folder. What am I doing wrong??!