undefined is not a function (near '...movies.map...')

I am trying to render the API data onto the page but get this error|undefined is not a function (near '...movies.map...')|how can i stamp my result in the page ?why in movie.title give me red error?

import { StatusBar } from 'expo-status-bar';import React ,{useState,useEffect} from 'react';import {ActivityIndicator, FlatList, Text,View} from 'react-native'import MovieBox from '../components/MovieBox';import { Ionicons } from '@expo/vector-icons';import styled from 'styled-components/native'import Header from '../components/Header';export default function Home() {const apiPath = "https://api.themoviedb.org/3/movie/popular?  api_key=i don't want to show"const [movies,setMovies]=useState<any[]>([])  useEffect(()=>{    fetch(apiPath)    .then(response=>response.json())    .then(res=>setMovies(res))    .catch(err=> console.log(err))  },[])  return (<><StatusBar       translucent       backgroundColor='transparent'      /><Container><Text>              {                movies.map(movie=>(<Text>{movie.title}</Text>                ))              }</Text> <Header/></Container></>  )}