How to make React project open up Index.Js components Instead of Index.html

I’m a beginner to React and I wanted to use React on the frontend. For some reason, every time I run ‘npm start’, it keeps routing to my public/index.html file rather than my index.js file which has all the components I want to run.

Code:

package.json

 "main": "src/index.js",
  "dependencies": {
    "accepts": "^1.3.8",
    "axios": "^1.7.2",
    "base64id": "^2.0.0",
    "cookie": "^0.4.2",
    "cors": "^2.8.5",
    "debug": "^4.3.5",
    "engine.io": "^6.5.5",
    "engine.io-parser": "^5.2.2",
    "mime-db": "^1.52.0",
    "mime-types": "^2.1.35",
    "ms": "^2.1.2",
    "negotiator": "^0.6.3",
    "object-assign": "^4.1.1",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-redux": "^9.1.2",
    "react-router-dom": "^6.24.0",
    "react-scripts": "^5.0.1",
    "redux": "^5.0.1",
    "socket.io": "^4.7.5",
    "socket.io-adapter": "^2.5.5",
    "socket.io-parser": "^4.2.4",
    "start": "^5.1.0",
    "undici-types": "^5.26.5",
    "vary": "^1.1.2",
    "ws": "^8.17.1"
  },
  "scripts": {
    "start": "react-scripts start src/index.js",
    "build": "react-scripts build src/index.js",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

index.js

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
// import { createRoot } from 'react-dom/client';

import './App.css';
import HomePage from './components/HomePage';

function App() {
  return (
    <Router basename="http://localhost:3000/">
      <Routes>
        <Route path="/" element={<HomePage />} />
        {/* Add more routes as needed */}
      </Routes>
    </Router>
  );
}
export default App;

I’ve been trying a number of different things like deleting package.json and lock and then reinstalling, commenting out appHtml from paths.json, etc. When I run npm start, I just want it to route strictly to index.js where I handle my other routes (i.e. ‘/’ loads my HomePage.js file).

However, when I load my react project on the browser and check inspect element -> network, I see that it’s clearly hitting my index.html page (which is all commented out for now), so I just see a blank page on localhost:3000/. Any suggestions? Please let me know if I’m misunderstanding something about React as I’m still learning 🙂