Component is not rendering However URL changes React Router v6

Question

I have been struggling trying to implement a redirect to another page whenever a user clicks an image. The images are obtained from a movie API and mapped into the img tag. I want the image to redirect the user to a page called video where users will be able to play their respective videos. Currently when I click the image the URL will change but nothing happens.Below is my code. Am a beginner and would appreciate any kind of help

Card.js

import React from "react"
// import Hover from "./Hover"
import { Link } from "react-router-dom"
import { BrowserRouter as Router, Routes, Route } from "react-router-dom"
import Video from "./Video"
import Error from "./Error"
export default function Card() {
const [all, setAll] = React.useState([])
const [movie, setMovie] = React.useState(false)
const [tv, setTv] = React.useState(false)
const [allmovies, setAllMovies] = React.useState([])
const [tvshows, setTvshows] = React.useState([])


React.useEffect(() => {
    fetch('https://api.themoviedb.org/3/trending/all/week?api_key=key')
        .then(data => {
            return data.json()
        }).then(all => {
            setAll(all.results)
        })
        .catch((err) => {
            console.log(err.message);
        })

}, [])
React.useEffect(() => {
    fetch('https://api.themoviedb.org/3/trending/movie/week?api_key=key')
        .then(data => {
            return data.json()
        }).then(movies => {
            setAllMovies(movies.results)
        })
        .catch((err) => {
            console.log(err.message);
        })
}, [])

React.useEffect(() => {
    fetch('https://api.themoviedb.org/3/trending/tv/week?api_key=key')
        .then(data => {
            return data.json()
        }).then(tv => {
            setTvshows(tv.results)
            console.log(tvshows)
        })
        .catch((err) => {
            console.log(err.message);
        })

}, [])
function toggleMovie() {
    setMovie(Movieprev => !Movieprev)
    if (movie === true) {
        console.log("am trying")
        setAll(allmovies)
    }
}
function toggleTv() {
    setTv(Tvprev => !Tvprev)
    if (tv === true) {
        setAll(tvshows)
    }
}

return (
    <div >
        <div id="top">
            <h1>Recommended</h1>
            <button onClick={toggleMovie}>Movies</button>
            <button onClick={toggleTv}> Shows</button>
        </div>
        {all.map(one => (
            <div id="movie-card">
                <Router>
                    <Link to="/Video"><img src={"https://image.tmdb.org/t/p/original/" + one.poster_path} alt={one.original_title}/></Link>
                    <Routes>
                        <Route path="/Video" element={<Video />} />
                        <Route path="*" element={<Error />} />
                    </Routes>
                </Router>

                <div id="media_type">
                    <h5>{one.original_title || one.original_name}</h5>
                    <h6>{one.media_type}</h6>
                </div>
                <h6>{one.release_date || one.first_air_date}</h6>
            </div>
        ))}
        {/* <div id="hover">
        <Hover data={one}/>
        </div> */}
    </div>
)
 }

my App.js

import React from "react"
import Nav from "./components/nav"
import Card from "./components/card"
import Slider from "./components/ControlledCarousel"

export default function App() {
return (
    <div>
        <Nav />
        <Slider />
        <Card />
    </div>

  )
  }

video.js

import React from 'react'

export default function Video() {
 return (
 <div>
    <h1>video</h1>
</div>
 )
}