Why am I unable to import my component in react? - reactjs

Question

I am doing a basic import of a component and it keeps on giving me this error:
./src/Nav.js
Module not found: You attempted to import ..\node_modules\#pmmmwh\react-refresh-webpack-plugin\lib\runtime\RefreshUtils.js which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
But my Nav component is inside the /src.
my import
import React from 'react'
const Nav = () => {
return(
<header class="header">
</header>
)
}
export default Nav
Here is my package.json:
{
"name": "react-timesheet-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#babel/core": "^7.12.16",
"#babel/preset-env": "^7.12.16",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-helmet": "^6.1.0",
"react-scripts": "4.0.2",
"web-vitals": "^1.0.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"
]
},
"devDependencies": {
"babel-loader": "^8.2.2",
"webpack": "^5.22.0"
}
}
I recently had a similar problem with missing packages, if that is the reason for the error, why do I keep on getting them?