TypeError: undefined is not an object (evaluating 'icons.map')

Question

import { Text, TouchableOpacity, View,Image,StyleSheet } from 'react-native' import React , { Component,useState } from 'react'

export const bottomtabsicon=[ { name:'Home', active:'https://as1.ftcdn.net/v2/jpg/01/98/91/58/1000_F_198915888_OpYSQ0FvfA6z85cWPJnUFp5jiJkfdhur.jpg',

},
{
    name:'Search',
    active:'https://icon-library.com/images/search-icon-jpg/search-icon-jpg-14.jpg',
    
},
{
    name:'Reels',
    active:'https://cdn.ipeeworld.com/wp-content/uploads/2022/02/see-instagram-reels-draft.png',
    
},
{
    name:'Home',
    active:'https://zeeoii.com/wp-content/uploads/2020/08/AMOLED-Mobile-Full-HD-Wallpaper-1080X1920-12.jpg',
    
},
{
    name:'Home',
    active:'https://zeeoii.com/wp-content/uploads/2020/08/AMOLED-Mobile-Full-HD-Wallpaper-1080X1920-12.jpg',
    
}

]

const BottomTabs = ({ icons }) => { const [activeTab,setactivetab] = useState('Home')

const Icon = ({icon}) =>(
    <TouchableOpacity onPress={()=>setactivetab(icon.name)}>
        <Image source={{uri:"icon.active"}} styles={styles.icons}  />
       
        </TouchableOpacity>

)
return(
    <View style={styles.container}>
      {icons.map((index,icon)=>(
          <Icon key={index} icon={icon}></Icon>
      ))}
    </View>
)

}

const styles = StyleSheet.create({ container:{ flexDirection:'row', justifyContent:'space-around', height:50, paddingTop:10 }, icons:{ width:30, height:30 } })

export default BottomTabs;