Mapping a unique list of items shows warning Warning: Each child in a list should have a unique "key" prop

Question

I'm mapping a list of routes as screens in react-native and I'm sure that every item in that list has a unique name property.

When mapping through that list the console shows a warning that reads: Warning: Each child in a list should have a unique "key" prop.

export const homeStack = [
  {name: 'Notifs', component: Notifs, isPrivate: true},
  {name: 'NewsScreen', component: News, isPrivate: false},
  {name: 'Map', component: Map, isPrivate: false},
  {name: 'ProfInfo', component: ProfInfo, isPrivate: true},
  {name: 'Passes', component: MyPasses, isPrivate: true},
  {name: 'DebtPasses', component: DebtPasses, isPrivate: false},
  {name: 'ViolPass', component: ViolPasses, isPrivate: false},
  {name: 'SSS', component: FAQ, isPrivate: false},
  {name: 'ContactUs', component: ContactUs, isPrivate: false},
  {name: 'Permissions', component: Permissions, isPrivate: true},
  {name: 'Logout', component: Logout, isPrivate: true},
  {name: 'PassRes', component: PassRes, isPrivate: true},
  {name: 'Welcome', component: Intro, isPrivate: false},
  {name: 'Payment', component: PaymentPreviewScreen, isPrivate: false},
  {name: 'Login', component: Login, isPrivate: false},
  {name: 'OTPScreen', component: OTPScreen, isPrivate: false},
  {name: 'Sign Up', component: Registration, isPrivate: false},
];

this is my list and I'm trying to understand what is wrong with it that says mapping this like:

{homeStack.map(
         ({name, component, isPrivate}, index) => {
             console.log('stack', index);
                              return (
                                    <Stack.Screen
                                      key={index}
                                      name={name}
                                      options={{
                                        headerShown: false,
                                        gestureEnabled: true,
                                        gestureDirection: 'horizontal',
                                        transitionSpec: {
                                          open: openConf,
                                          close: closeConf,
                                        },
                                        cardStyleInterpolator:
                                          CardStyleInterpolators.forModalPresentationIOS,
                                      }}
                                      component={component}
                                    />
                                  )

This is supposedly not unique? Is it because of the way I'm mapping?

Incase there's confusion here's the TabNav mapping and the list;

export const tabs = [
  { name: 'Home', component: Home, isPrivate: false, iconName: 'home' },
  { name: 'Vehicles', component: MyPlates, isPrivate: true, iconName: 'car' },
  { name: 'Summary', component: Summary, isPrivate: true, iconName: 'book' },
  { name: 'Profile', component: MyProfile, isPrivate: true, iconName: 'user' },
];

{tabs.map(({name, component, isPrivate, iconName}) => <Tab.Screen key={name} /> )}

Answer 1

Try this one.

{homestack.map((i) => (
   <Stack.Screen key={i.name} /> )}
))}

Following the syntax for the arrow function is like this based on their documentation

// Arrow function
map((element) => { /* ... */ })
map((element, index) => { /* ... */ })
map((element, index, array) => { /* ... */ })