Why do I have to rerun the server on every change of my react app?

I'm making my first project using react, until now I never used any other framework, only pure html+js+php+nodejs. So, I was building a portfolio spa, but I've got this issue. When I make any change in the project, I have to restart the entire server to make it actualize. I'm pretty sure it's not supposed to happen.

to be more precise, I've created a react app using cra (npx create-react-app if I remember) and I'm running the server with "npm start".

This aside, I'm using VSC as my IDE on Win 11 and my terminal is on wsl: kali linux

Here is my App.js

import React from 'react';
import './App.css';
import './layer1.svg';
import Menu from './components/menu';
import Portfolio from './components/portfolio'
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'





function App() {
  return (
  <div>
    <Menu/>
    <Router>
        <Routes>
        <Route path="/portfolio" element={<Portfolio />}/>
        <Route exact path="/" element={<Portfolio />}/>
        </Routes>
    </Router>
    </div>
  );
}

export default App;

here is my index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
if (module.hot) {
  module.hot.accept();
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

I've made a lot of research to try to solve my issue, here's what I tried:

1. increasing my max user watches to 524288
2. adding a ".env" file with FAST_REFRESH=false in it
3. adding:

if (module.hot) {
  module.hot.accept();
}

into my index.js

4. modifying my package.json .scripts:

  "scripts": {
    "start": "CHOKIDAR_USEPOLLING=true react-scripts start", //here
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

but nothing works.

I am expecting the changes to appear in my browser, either auto, or even by reloading the page.

Huge thanks to anyone that can help me :)

EDIT: Even on Vite, the issue came from the fact that I was running vite/vanilla on wsl. Running thé server directly on the windows terminal instead worked as expected

The issue was that I used npx create-react-app to create my react project, it's quite outdated. Switching to Vite, I can now restart the server in under 1sec and refresh the page, just by typing "r" in the console. So I don't even have to use hot reload or anything.

If you have the same issue, try create a new React+Vite project (https://vitejs.dev/guide/) and migrate your files to the new project, you might have to change a few things but it will be worth it.