using same component for different route path in react-router v6

import React, { Component } from 'react';
import Navbar from './Components/Navbar';
import News from './Components/News';
import Test from './Components/Test';
import NoMatch from './Components/NoMatch';
import { BrowserRouter , Route, Routes } from 'react-router-dom'
export default class App extends Component {

  render() {
    return <div>
      <BrowserRouter>
        < Navbar />
        <Routes>
    
            <Route  path="/" element={<News pageSize={8} key="1" category="sports"/>}/>

            <Route key="ee-client" path="/business" element={<News key="2" pageSize={4} category="business"/>}/>

            <Route key="eef-client" path="/entertainment" element={<News key="3" pageSize={2} category="entertainment"/>}/>

            <Route key="evve-client" path="/general" element={<Test />}/>

            <Route path="*" element={<NoMatch />} />

          
        </Routes>
      </BrowserRouter>
    </div>;
  }
}

reference - https://stackoverflow.com/questions/49001001/using-same-component-for-different-route-path-in-react-router-v4