React is not rendering components

Question

I'm working on a project with a single component (Home). I'm trying to render the component on localhost:3000. But it's not showing up in the browser.

The error is:

Uncaught TypeError: Cannot read properties of null (reading 'useRef')
         at useRef (bundle.js:48556:25)
         at BrowserRouter (bundle.js:45657:65)
         at renderWithHooks (bundle.js:23687:22)
         at mountIndeterminateComponent (bundle.js:28304:17)
         at beginWork (bundle.js:29759:20)
         at beginWork$1 (bundle.js:34660:18)
         at performUnitOfWork (bundle.js:33821:16)
         at workLoopSync (bundle.js:33734:9)
         at renderRootSync (bundle.js:33703:11)
         at performSyncWorkOnRoot (bundle.js:33346:24)

This error was logged on to the console.

Below are my code files:

1. App.js

import {BrowserRouter as Router,Route,Routes} from 'react-router-dom'
import Home from './Components/Home';
import Login from './Components/Login';
import React from 'react';
import './App.css'

function App() {
  return (
    <>

     <Router>
      <Routes>
        <Route exact path="/" element={<Home/>}></Route>
        <Route exact path="/login" element={<Login/>}/>
      </Routes>
    </Router>
    </>
   
  );
}

export default App;

2. Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

3.Home.js

import React from 'react'

export default function Home() {[![enter image description here][1]][1]
  return (
    <>
    <h1 style={{backgroundColor:'red'}}>Home Component </h1>
    </>
  )
}

Answer 1

Try to change the route. Give any other directory other than 30000. Hopefully, it will work. also in the App.js>login part> give route closing tag.