How I can to put page not found On case invalid slug

Question

I need to put page notfound if slug invalid.
I have these routes

<Switch>
    
    <Route  exact path = '/myflix/:slug' component = { Home } />
    <Route  exact path = '/myflix/:slug/register' component = { Signup } />
    <Route  exact path = '/myflix/:slug/event' component = { Event } />
    <Route  exact path = '/myflix/:slug/contact' component = { Contact } />
    <Route  exact path = '/myflix/:slug/login' component = { Login } />
    <Route  exact path = '/myflix/:slug/show-details' component = { ShowList } />
    <Route  exact path = '/myflix/*' component = { NotFound } />

  </Switch>

:slug get from API I have some slug in API I need to put error when slug invalid
how I can do this? On case invalid slug

const NotFound = () => {
  return (
    <div>NotFound</div>
  )
}
export default NotFound

Answer 1

import {Error } from './Pages'
import { Route, BrowserRouter, Routes } from "react-router-dom";

<BrowserRouter>
        <Routes> 
          <Route path="*" element={<Error />} />  
        </Routes>
</BrowserRouter>

[from a comment]:

import { Home, Error } from './Pages' 
import { Route, BrowserRouter, Routes } from "react-router-dom"; 

function App() { 
    return ( <> <BrowserRouter> <Routes> {
            !localStorage.token ? <>
            <Route path="/" element={<Home/>} /> 
            <Route path="*" element={<Error />} /> 
        </Routes> </BrowserRouter> </> );
}
export default App;