如何在屏幕上显示多个电影，而不是只在react原生中显示一个来自moviesDB应用程序接口的电影？

import React, { useEffect, useState } from 'react';
import axios from 'axios';

const Movie = ({ movie }) => {
  return (
    <div>
      <h2>{movie.title}</h2>
      <img src={movie.poster} alt={movie.title} />
      <p>Rating: {movie.rating}</p>
    </div>
  );
};

const MovieList = ({ movies }) => {
  return (
    <div>
      {movies.map((movie) => (
        <Movie key={movie.id} movie={movie} />
      ))}
    </div>
  );
};

const App = () => {
  const [movies, setMovies] = useState([]);

  useEffect(() => {
    axios.get('https://api.moviesdb.com/movies')
      .then((response) => {
        setMovies(response.data);
      })
      .catch((error) => {
        console.error(error);
      });
  }, []);

  return (
    <div>
      <h1>Movie List</h1>
      <MovieList movies={movies} />
    </div>
  );
};

export default App;