Not able to Display API Data in react js

Question

I'm attempting to develop a modest film-based project. I have used TMDB Movies to obtain movies. I don't sure where I went wrong because the data in my console is displaying OK, but when I try to map and display that element, I receive an error saying:

"Movies.map is not a function."

Please try to correct my mistake.

import "./App.css";
import MemsData from "./Components/MemsData";
import NewMemsData from "./Components/NewMemsData";
import FilterElement from "./Components/FilterElement";
import MovieBox from "./Components/MovieBox";
import { useEffect, useState } from "react";
import Axios from "axios";

function App() {
  const API_URL =
    "https://api.themoviedb.org/3/movie/popular?api_key=8f11538792fbc26efa63aa919f0844b8";

  const [movie, setMovie] = useState([]);

  useEffect(() => {
    Axios.get(API_URL).then((res) => {
      console.log(res);
      setMovie(res.data);
    });
  });

  return (
    <div className="App">
      <h2>Movie Api</h2>
      {
        movie.map((moviereq, index) => {
          return <div key={index}>{moviereq.title}</div>;
        })}
    </div>
  );
}

export default App;

Answer 1

You need to go one deeper and access results: setMovie(res.data.results);

Codesandbox link: https://codesandbox.io/s/frosty-voice-hc912d?file=/src/App.js:392-400