TypeError: Cannot read property 'map' of undefined Row (Row.js:18) React JS

import React,{ useState, useEffect} from 'react';
import axios from './axios';
import './Row.css';
function Row({title,fetchUrl,isLargeRow=false}){
      const[movies,setMovies]=useState([]);
      const base_url="https://image.tmdb.org/t/p/original/";
      useEffect(() => {
            async function fetchData() {
            const request= await axios.get(fetchUrl);
            setMovies (request.data.results);
            return request;
      }
            fetchData();
      },[fetchUrl])
      console.log(movies);
      return (
            <div className="row">
                  <h2>{title}</h2>
                  {movies.map((movie) =>
                  <img 
                  src={`${base_url}$(isLargeRow? movie.poster_path: movie.backdrop_path}`}
                  alt={movie.name} 
                  />)}
            </div>
      )
}

export default Row

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>

import React ,{useState,useEffect} from 'react';
import "./Banner.css";
import axios from "./axios";
import requests from "./Requests";
function Banner() {
      const [movie,setMovies]=useState([]);
      useEffect(()=>{
            async function fetchData(){
                  const request=await axios.get(requests.fetchNetfilxOriginals);
                  setMovies(
                        request.data.results[
                              Math.floor(Math.random()*request.data.results.length-1)
                        ]
                  );
                  return (request);
            }
            fetchData();
      },[]);

      function truncate(string,n)
      {
            return ((string?.length>n)?string.substr(0,n-1)+"...":string);
      }
      
      return (
            <header 
            className="banner"
            style={{
                  backgroundSize:"cover",
                  backgroundImage:`url("https://image.tmdb.org/t/p/original/${movie?.backdrop_path}")`,
                  backgroundPosition:"center center"
            }}>

                  <div className="banner__contents">
                        <h1 className = "banner__title" >{movie?.title||movie?.name||movie?.original_name}</h1>
                        <div className="banner__buttons">
                        <button className="banner__button">Play</button>
                        <button className="banner__button">My list</button>
                  </div>
                  <h1 className = "banner__description">{truncate(movie?.overview,150)}</h1>
                  </div>
                  {/*to add fading feature below the upper div */}
                  <div className="banner--fadeBottom" />
            </header>
      )
}

export default Banner;