after installing react-router-dom version 6 I tried to run npm start but I get a blank page with no error in my console. Below the first code is the code for the screen I want to display. Please can someone help me and show me what I am not doing correctly here.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

import reportWebVitals from './reportWebVitals';
import MovieList from './component/movieList';

import  { BrowserRouter as Router, Routes, Route } from 'react-router-dom';


ReactDOM.render(
  <React.StrictMode>
    <Router>
    <Routes>
      <Route exact path = "/welcome" element = {MovieList}/>
    </Routes>
    </Router>
    
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

import { useState } from "react";

function MovieList() {
  const [searchTerm, setSearchTerm] = useState("")
  const [movies, setMovie] = useState([])
  const handleMovieSearchChange = (e) => {
    setSearchTerm(e.target.value);
  };

  const fetchMovie = (movieName) => {
    const searchUrl = `https://www.omdbapi.com/?s=${movieName}&page=2&apikey=2c2c85ae`;

    fetch(searchUrl)
      .then((response) => response.json())
      .then((result) => {
        setMovie(result.Search);
      });
  };

  const movieItems = movies.map((movie, index) => {
    return (
      <div key={index}>
       <img src={movie.Poster} alt="" />
        <h3>{movie.Title}</h3>
      </div>
    )
  })

  return (
    <div>
      <h1>Movie List Page</h1>Search
      <input type={"text"} onChange={handleMovieSearchChange} />
      <button onClick={() => fetchMovie(searchTerm)}>Search</button>
      {movieItems}
    </div>
  );
}

export default MovieList;