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

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;