[React Study] Movie List

import { useEffect, useState } from 'react';
import Card from 'react-bootstrap/Card';
import PropTypes from 'prop-types';

function Movie(props) {
  const movie = props.movie;

  return (
    <div>
      <Card style={{ width: '18rem' }}>
        <Card.Img variant="top" src={movie.medium_cover_image} />
        <Card.Body>
          <Card.Title>{movie.title}</Card.Title>
          <Card.Text>{movie.summary}</Card.Text>
        </Card.Body>
      </Card>
      <br />
    </div>
  );
}

Movie.prototype = {
  movie: PropTypes.object.isRequired,
};

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

MovieList.prototype = {
  movies: PropTypes.array.isRequired,
};

function CoinTracker() {
  const [isLoading, setIsLoading] = useState(true);
  const [movies, setMovies] = useState([]);

  const getMovies = async () => {
    const response = await fetch(
      `https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year`,
    );
    const json = await response.json();

    setMovies(json.data.movies);
    setIsLoading(false);
  };

  useEffect(() => {
    getMovies();
  }, [movies]);

  return (
    <div>
      <h1>Item List</h1>
      {isLoading ? <strong>Loading...</strong> : <MovieList movies={movies} />}
    </div>
  );
}

export default CoinTracker;