React routing not loading pages

Simply you can handle the routing in your index.js like this:

import { BrowserRouter, Route, Routes } from "react-router-dom";

ReactDOM.render(
  <div>
  <BrowserRouter>
    <Routes>
   
      <Route path="/" element={<AllMeetupsPage />} />
      <Route path="/new-meetup" element={<NewMeetupsPage />} />
      <Route path="/favorites" element={<FavoritesPage />} />
     
   
    </Routes>
  </BrowserRouter>
  </div>,
  document.getElementById("root")
);

You have to wrap your routes with <BrowserRouter> which is done already in index file which is fine. Next, Routes must be wrapped with <Routes> component as of 'react-router-dom' latest version v6

import { Routes, Route } from "react-router-dom";

function App(){
return (
<div>
  <Routes>
      <Route path="/" element={<AllMeetupsPage />} />
      <Route path="/new-meetup" element={<NewMeetupsPage />} /> 
  </Routes>
</div>
);
}

export default App;