I am trying to use a navlink in my app.jsx file to create links in my navbar but when I try to npm start, I dont see the nav links and I get a message that says No routes matched location "/". I'm not sure why. I saw somewhere that I needed to start using element but I'm not sure how. I'll show app.jsx file with the element statements that didn't seem to work still and the file without using element at all which also didn't help but is what I'm used to. Can someone point me in the right direction?

index.js :

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './pages/App/App';
import { BrowserRouter, Routes, Route } from 'react-router-dom'

ReactDOM.render(
  <BrowserRouter>
    <Routes>
      <React.Fragment>
        <Route render={() => <App/>} />
      </React.Fragment>
    </Routes>
  </BrowserRouter>,
  document.getElementById('root')
);

App.jsx : with element

import React, { useState } from 'react';
import { Route, NavLink } from 'react-router-dom'
import './App.css';

function App() {

  const [puppies, setPuppies] = useState([])

  return (
    <div className="App">
      <header className="App-header">
        React Puppies CRUD
        <nav>
          <NavLink exact to='/' element={<div>Index</div>}>Puppy List</NavLink>
          <NavLink className='m-left' exact to='/add' element={<div>Add</div>}>Add Puppy</NavLink>
        </nav>
      </header>
      <main>
      </main>
    </div>
  );
}

export default App;

App.jsx : without element

import React, { useState } from 'react';
import { Route, NavLink } from 'react-router-dom'
import './App.css';

function App() {

  const [puppies, setPuppies] = useState([])

  return (
    <div className="App">
      <header className="App-header">
        React Puppies CRUD
        <nav>
          <NavLink exact to='/'>Puppy List</NavLink>
          <NavLink className='m-left' exact to='/add'>Add Puppy</NavLink>
        </nav>
      </header>
      <main>
      </main>
    </div>
  );
}

export default App;