Working on a React App with a team using VSCode, when I save my code I don't see the updates, but my teammates can see theirs just fine - node.js

Question

So I am working on my react web app with a team. We are all using Git/Gitlab.
Everyone was instructed to clone the project using git, and we all did so.
The problem is that when I run the project on VS CODE, I try to edit the file, save the file, and hope to see the changes In real time. But in order for me to see it, I have to turn off the project with Ctrl+C and redo "npm run dev", have it recompile, and then I'll see my changes after a minute.
Everyone else on the other hand can see their changes in real time.
Our file path is..
/mnt/c/Users/major/OneDrive/Documents/PENNY/penny-earned
(I'm running a linux sub system (ubuntu) as well
So we run
npm install
AND
npm run dev
in the above location
Then we run...
npm install
AND
npm run start
in
/mnt/c/Users/major/OneDrive/Documents/PENNY/penny-earned(this is the folder I cloned)/server (this is the backend folder)
Full Disclosure, I have been tinkering with VS Code like changing the integrated terminal using WSL, zsh and powerlevel9k extensions. But other than that, I don't see what the problem is.
Addition:
package.json
{
"name": "react-penny-earned",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "npx webpack-dev-server --mode development",
"build": "npx webpack --mode development",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/cli": "^7.8.3",
"#babel/core": "^7.8.3",
"#babel/helper-compilation-targets": "^7.15.4",
"#babel/plugin-transform-runtime": "^7.8.3",
"#babel/preset-env": "^7.8.3",
"#babel/preset-react": "^7.8.3",
"babel-loader": "^8.0.6",
"css-loader": "^3.4.2",
"react-hot-loader": "^4.12.19",
"style-loader": "^1.1.3",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.1"
},
"dependencies": {
"#babel/runtime": "^7.8.3",
"#emotion/react": "^11.4.1",
"#emotion/styled": "^11.3.0",
"#mui/icons-material": "^5.0.1",
"#mui/lab": "^5.0.0-alpha.50",
"#mui/material": "^5.0.2",
"lodash": "^4.17.21",
"react": "^17.0.2",
"react-dom": "^16.12.0",
"react-google-charts": "^3.0.15",
"react-icons": "^4.2.0",
"react-redux": "^7.1.3",
"react-router-dom": "^5.3.0",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.3.0"
}
}
package.json (server)
{
"name": "react-ecosystems-server",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "npx babel-node src/server.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"body-parser": "1.19.0",
"cors": "2.8.5",
"express": "4.17.1",
"uuid": "3.3.3"
},
"devDependencies": {
"#babel/core": "7.7.5",
"#babel/node": "7.7.4",
"#babel/preset-env": "7.7.6"
}
}
***Not sure if this should impact anything considering my teammates have the exact same configuration on their system
Webpack.config.js
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: './src/index.js',
mode: 'development',
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
options: { presets: ["#babel/env"] }
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
]
},
resolve: { extensions: ['*', '.js', '.jsx'] },
output: {
path: path.resolve(__dirname, 'dist/'),
publicPath: '/dist/',
filename: 'bundle.js'
},
devServer: {
contentBase: path.join(__dirname, 'public/'),
port: 3000,
publicPath: 'http://localhost:3000/dist/',
hotOnly: true,
historyApiFallback: true,
},
plugins: [new webpack.HotModuleReplacementPlugin()]
};