OMdb react props.data.map is not a function

Question

I'm trying to display data from the OMdb API, but every time I try using my method nothing works. I want to display the movie posters onto a slider using Spline.js, I was able to successfully do so whenever I manually put in the JSON data into the state but now I want to get the data from the API and I'm coming across this props.movie.map is not a function error all the way in an external component.

Heres the project on CodeSandbox just in case
https://codesandbox.io/s/github/JojoDuke/reactmoviesapp?file=/src/App.js

App.js

/* eslint-disable react-hooks/exhaustive-deps */
import React, { useState, useEffect } from 'react';
import "bootstrap/dist/css/bootstrap.min.css";
import "./App.css"
import MoviesList from "./components/MoviesList";
import ListHeading from './components/ListHeading';
import { SearchBox } from './components/SearchBox';
import AddFavourites from './components/AddFavourites';
import RemoveFavourites from './components/RemoveFavourites';
import MainMovie from './components/MainMovie';
import Navbar from './components/Navbar';
import Footer from './components/Footer';

const App = () => {
  const [movies, setMovies] = useState([]);
  const [searchValue, setSearchValue] = useState("");
  const [favourites, setFavourites] = useState([]);

  // Backup
  // const getMovie = async () => {
  //   const url = 'http://www.omdbapi.com/?i=tt3896198&apikey=ce990560';
  //   const res = await fetch(url);
  //   const data = await res.json();
  //   const responseJson = JSON.parse(data);
  //   setMovies(responseJson);
  // }

  const API_KEY = "91d62f4";
  const url = `http://www.omdbapi.com/?i=tt3896198&apikey=${API_KEY}`;

  const getMovies = async () => {
    try {
      const response = await fetch(url);
        const data = await response.json()
        setMovies(data);
    } catch (e) {
        console.error(e.toString);
    } 
  }
  
  // FUNCTIONS
  useEffect(() => {
    getMovies();
  }, []);

  useEffect(() => {
        const movieFavourites = JSON.parse(
            localStorage.getItem('react-movie-app-favourites')
        );

        if (movieFavourites) {
            setFavourites(movieFavourites);
        }
    }, []);

  const saveToLocalStorage = (items) => {
    localStorage.setItem('react-movie-app-favourites', JSON.stringify(items));
  }

  const addFavouriteMovie = (movie) => {
    const newFavouriteList = [...favourites, movie];
    setFavourites(newFavouriteList);
    saveToLocalStorage(newFavouriteList);
  }

  const removeFavouriteMovie = (movie) => {
    const newFavouriteList = favourites.filter((favourite) => favourite.imdbID !== movie.imdbID);
    setFavourites(newFavouriteList);
    saveToLocalStorage(newFavouriteList);
  }
  // FUNCTIONS CLOSE

  return (
    <div>
      {/* Navigation Bar */}
      <div>
        <Navbar />
      </div>

      <div className="row d-flex align-items-center mb-5">

        {/* Main Movie Area */}
        <MainMovie/>

        {/* <SearchBox 
          searchValue={searchValue} 
          setSearchValue={setSearchValue}/> */}
      </div>

      {/* Movies List */}
      <ListHeading heading="Trending" />
      <div>
        <MoviesList 
          movies={movies} 
          handleFavouritesClick={addFavouriteMovie} 
          favouriteComponent={AddFavourites}/>
      </div>

      {/* List 2 */}
      <div className="row d-flex align-items-center mt-4 mb-4">
        <ListHeading heading="Cinetime Originals" />
      </div>
      <div>
        <MoviesList 
          movies={movies} 
          handleFavouritesClick={addFavouriteMovie} 
          favouriteComponent={AddFavourites}/>
      </div>

      {/* List 3 */}
      <div className="row d-flex align-items-center mt-4 mb-4">
        <ListHeading heading="Classics" />
      </div>
      <div>
        <MoviesList 
          movies={movies} 
          handleFavouritesClick={addFavouriteMovie} 
          favouriteComponent={AddFavourites}/>
      </div>

      <Footer />
    </div>
  );
};

export default App;

MoviesList.js(where I'm getting the error)

import React from 'react';
import { Splide, SplideSlide } from '@splidejs/react-splide';
//import '@splidejs/splide/dist/css/themes/splide-default.min.css';

const MoviesList = (props) => {
    //const FavouriteComponent = props.favouriteComponent;

    const movieSplide = props.movies.map((movie, index) => {
        return(
            <SplideSlide>
            <div className="movie-div">
                        <div className="overlay"></div>
                        <img 
                            className="movie-item shadow" 
                            src={movie.Poster} 
                            alt='movie'></img>
            </div>
            </SplideSlide>
        );
    });

    return(
        <Splide options={{
            rewind: false,
            autoWidth: true,
            perPage: 6,
            perMove: 2,
            pagination: false,
            gap: '1em',
            focus: 'center',
            type: 'slide',
            easing: 'ease',
            arrows: true
        }}>
            {movieSplide}
        </Splide>
    );
};

export default MoviesList;