I am trying to display h2 events on my page and when I click on URL category_events and notations too.

`App.js:

import './App.css';
import React, { Component } from 'react'
// import Header from './components/Header';
import Events from './components/Events/Events';
import Date from './components/Date/Date';
import Accueil from './components/Accueil/Accueil';
import { BrowserRouter, Route, Routes, Link } from 'react-router-dom';




function App() {
  return (
    <div className="wrapper">
      <h1>Marine Mammals</h1>
    <BrowserRouter>
    <nav>
      <ul>
        <li><Link to="/events">Events</Link></li>
        <li><Link to="/date">Date</Link></li>
        <li><Link to="/accueil">Accueil</Link></li>
        <li><Link to="/events/Category_events">Category Events</Link> 
       </li>
        <li><Link to="/events/Notations">Notations</Link></li>

      </ul>
    </nav>
    <Routes> 
    <Route path="/Date"> <Date/> </Route> 
    <Route exact 
     path="/events"> <Events/> </Route> 
    <Route path="/events/:type"> 
    <Events/> </Route>
      </Routes>
    </BrowserRouter>

    </div>
  );
}



export default App;

Events.js:

import React from 'react';
import { useParams } from 'react-router-dom';
import Category_events from './Category_events';
import Notations from './Notations';


export default function Events(){
  const { type } = useParams();

  


  return (
    <>
      <h2>Events</h2>
      {type === 'Category_events' && <Category_events />}
      {type === 'Notations' && <Notations/>}

      
    </>
  );
}

I got this error: Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: /home/thibaut/fastmeet/src/App.js: Expected corresponding JSX closing tag for <Routes>. (35:8)

33 | <Route path="/Date"/>
34 | <Date/>

35 | </Route> | ^ 36 |
37 | <Route exact path="/events"/>
38 | <Events/>