React router dom enrutando a ItemDetail

Estoy haciendo un proyecto personal de React.js. Estoy tratando de usar react-router-dom, pero no he podido hacer que funcione. Hice el BrowserRouter en App.js. Hasta ahí la aplicación funciona bien, pero no puedo hacer que la ruta redirija dinámicamente a un elemento de mapa. Intenté seguir la documentación y algunos tutoriales sin éxito. Los datos provienen de la API de Star Wars. Este es el código:
App.js:

import './App.css';    
import { Route, BrowserRouter as Router, Routes } from "react-router-dom";    
import Home from './components/Home';
import MovieDetail from './components/MovieDetail'
import Navbar from './components/Navbar';

function App() {
  return (
    <router>
      <>
      <navbar></navbar>
        <routes>
            <route exact="" path='/' element=""></route><home></home>} />
        </routes>    
        <routes>
            <route exact="" path="" to='/:movieId' element=""></route><moviedetail></moviedetail>} />
        </routes> 

    </router>  
  );
}

export default App;

MovieDetail:

import { useEffect, useState } from "react";    
import { useParams } from "react-router-dom";

const MovieDetail = () => {
    const { movieId } = useParams();

    const [result, setResult] = useState([]);

    const fetchData = async () => {
        const res = await fetch("https://www.swapi.tech/api/films/");
        const json = await res.json();
        setResult(json.result);
    }
    useEffect(() => {
        fetchData();
    }, []);

    let movieMatch = (result.find(value) => value.properties.title == movieId)

    return (
        <div>
            <h2>
            {result
            .find((value) => {value.properties.title == movieId})}
            </h2>
        </div>
    );
}

export default MovieDetail;

ACTUALIZACIÓN
Este es un enlace al código completo en codesandbox con App.js actualizado