I am new to react app trying to add a component and loading when app opens but it is showing in console Matched leaf route at location "/" does not have an element. This means it will render an <Outlet /> with a null value by default resulting in an "empty" page what is implemented wrong please help

App.js

import React from 'react';
import './app.css';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import JOB_DESC from './job_desc';

function App() {
  return (
    <Router>
      <Routes>
      <Route exact path='/' component={JOB_DESC} />
      </Routes>
    </Router>
  
)

}
export default App;

job_desc.js

import React, { Component } from 'react';
import './app.css';
import ReactImage from './react.png';

export default class JOB_DESC extends Component {
  state = { data: null };

  componentDidMount() {
    fetch('/api/getUsername')
      .then(res => res.json())
      .then(res => this.setState({ data : res.data}));
  }

  render() {

    const { data } = this.state;
    console.log("DATA", data);
    return (
      <div>
        <h1>Test</h1>
        {username ? <h1>{`Hello ${username}`}</h1> : <h1>Loading.. please wait!</h1>}
        <img src={ReactImage} alt="react" />
      </div>
    );
  }
}

index.js

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

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