How to display it

  return (
    <section className="col-sm-6">
      <h2>Movie List</h2>

      {error && <p style={{ color: "red" }}>{error}</p>}
      {movies.length === 0 && <p>No movies available.</p>}

      <div className="row">
        {movies.map((movie) => (
          <div
            className="col-sm-6 col-md-4 col-lg-2 border p-5 mb-4"
            key={movie.id}
          >
            <h3>{movie.title}</h3>
            <p>
              <strong>Director:</strong> {movie.director}
            </p>
            <p>
              <strong>Release Year:</strong> {movie.release_year}
            </p>
            <p>
              <strong>Genre:</strong> {movie.genre}
            </p>
            <img
              src={`/${movie.title}.jpg`}
              alt={movie.title}
              className="img-fluid mb-3"
            />
    
          </div>
        ))}
      </div>
    </section>
  );
};

Sandbox link if you want to test it