después de instalar react-router-dom versión 6, intenté ejecutar npm start pero aparece una página en blanco sin errores en mi consola. Debajo del primer código está el código de la pantalla que quiero mostrar. Por favor, ¿alguien puede ayudarme y mostrarme lo que no estoy haciendo correctamente aquí?

 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;