I’m new to React and currently working on a project in a tutorial. My app has been working fine with static routes, however, as soon as I introduce react router in my app, I get only blank page without any error. I have been searching for last two days, and tried all given solution such as:

1. downgrade react router dom to v5.
2. using exact keyword
3. switched between component and element keyword
4. Using Routes and without using Routes.

However, none of the solutions seem to work. I have a doubt that it is related to some other package dependency may be, but not sure which package to touch. Following is my package.json configuration:

  "name": "merstart",
  "version": "1.0.0",
  "description": "MERN practice",
  "main": "index.js",
  "scripts": {
    "start": "nodemon -w server server/server.js",
    "compile": "webpack",
    "watch": "webpack-dev-server --hot --no-client-overlay-runtime-errors",
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.20.2",
    "express": "^4.19.2",
    "mongodb": "^6.8.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.3.0",
    "babel-polyfill": "^6.26.0",
    "nodemon": "^3.1.4",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-router-dom": "^6.26.0",
    "webpack": "^5.93.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-middleware": "^7.3.0",
    "webpack-dev-server": "^5.0.4",
    "webpack-hot-middleware": "^2.26.1",
    "whatwg-fetch": "^3.6.20"
  }
}

My main app code is as following:

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter as Router, Routes,Route} from 'react-router-dom';
import IssueEdit from './IssueEdit.jsx';



//import IssueAdd from './IssueAdd.jsx';

const contentNode = document.getElementById('contents');

const noMatch = ()=> <p>Page not found.</p>

const RoutedApp = ()=> {
    console.log("Reached routed app");
    <Router>
    <Routes>
        <Route path="/" action={()=>{console.log("action")}} loader={()=>{console.log("Loader")}} element={<IssueList />} />
        <Route path="/issueEdit" element={<IssueEdit />} />
        <Route path="*" element={<noMatch />} />
    </Routes>
    </Router>
    console.log("Reached end of router");
};

ReactDOM.render(<RoutedApp />,contentNode);

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

Both the console logs for RoutedApp start and end are printed in console, but but console in action of first Route is not printed. Note that if I directly render my IssueList.jsx, it works fine, but when I try with react router it fails.

There are no errors to show. Can anyone guide please.