React router nested, open new page as soon as there are params

Currently building with create-react-app and I'm trying to get dynamic routing. I have a site with 3 pages: Accordion, Movies, MovieDetail.

Page Movie is a page with a list of fetched movies from swapi. The goal is to open a new page as soon as you click on a movie title. The new page should give you more info about the clicked movie.

The problem: The MovieDetail page will render the information on the same page of Movies. Not on a new page..

the code: Index.tsx

const routing = (
    <Router>
        <div>
            <nav>
                <ul>
                    <li>
                        <Link to="/">Home</Link>
                    </li>
                    <li>
                        <Link to="/movies">Movies</Link>
                    </li>
                </ul>
            </nav>

            <Switch>
            <Route exact={true} path="/" component={App} />
            <Route path="/movies" component={Movies} />
            <Route exact={true} path="/movies/:id" component={MovieDetail} />
            <Route component={NotFound} />
            </Switch>
        </div>
    </Router>
);

ReactDOM.render(routing, document.getElementById('root'));

Movies.tsx:

import React from 'react';
import { Route, useParams, Link, Switch } from 'react-router-dom';
import { useMovies } from './api/useMovies';
import { MovieDetail } from './MovieDetail';

export const Movies = () => {
    let { id } = useParams();
    const movies = useMovies();

    return (
        <div>
            <h1>Movies</h1>
            <h2>Selected movie: {id}</h2>
            <h2>Select a movie:</h2>
            {movies &&
                (
                    <ul>
                        {console.log(movies)}
                        {movies.results.map((movie, index) => {
                            return (
                                <li key={index}>
                                    <Link to={`/movies/${index + 1}`}>{movie.title}</Link>
                                </li>
                            );
                        })
                        }
                    </ul>
                )
            }
            <Switch>
                <Route path="/movies/:id" component={MovieDetail} />
            </Switch>
        </div>
    );
};

MovieDetail.tsx:

import React from 'react';

export const MovieDetail = () => {

    return (
            <h1>Movie Title</h1>
    );
};