Hi i'm learning react and have some poblem. I wont to display error element when url doesn't match with none path.

I create ErrorPage element but stil getting this warning "No routes matched location".

Here is my code i wrote:

import React, { Component } from "react";
import {
  BrowserRouter as Router,
  NavLink,
  Route,
  Routes,
} from "react-router-dom";
import "./App.css";

const Home = () => <h1>Home</h1>;

const News = () => <h1>News</h1>;

const Contact = () => <h1>Contact</h1>;

const ErrorPage = () => <h1>Page not found</h1>;

class App extends Component {
  state = {};
  render() {
    return (
      <Router>
        <div>
          <header>
            <nav>
              <ul>
                <li>
                  <NavLink to="/">Home</NavLink>
                </li>
                <li>
                  <NavLink to="/news">News</NavLink>
                </li>
                <li>
                  <NavLink to="/contact">Contact</NavLink>
                </li>
              </ul>
            </nav>
          </header>
          <section>
            <Routes>
              <Route path="/" element={<Home />} />
              <Route path="/news" element={<News />} />
              <Route path="/contact" element={<Contact />} />
              <Route element={<ErrorPage />} />
            </Routes>
          </section>
        </div>
      </Router>
    );
  }
}

export default App;