React map list in function return HTML code

Question

I am creating my application menu and have the following error in my function :

Each child in an array or iterator should have a unique "key" prop

function buildListItemWithNavLink(prop, key, activePro, listItemClasses, whiteFontClasses){
return (
  <div>
    <NavLink
      properties
    >
      <ListItem button className={classes.itemLink + listItemClasses}>
        <ListItemText
            properties
        />
      </ListItem>
    </NavLink>
    {prop.subMenus != null ? (
      prop.subMenus.map((propSubMenu, keySubMenu) => {
        if(propSubMenu.path != undefined)
          return buildListItemWithNavLink(propSubMenu, keySubMenu, activePro, listItemClasses, whiteFontClasses);
        else
          return buildListItemWithoutNavLink(propSubMenu, whiteFontClasses);
      })
    ) : null}
  </div>
);
}  

My operation is called in a var :

var links = (
<List className={classes.list}>
  {routes.map((prop, key) => {
    if (prop.redirect) return null;
    var activePro = " ";
    var listItemClasses;
    listItemClasses = classNames({
      [" " + classes[color]]: activeRoute(prop.path)
    });

    const whiteFontClasses = classNames({
      [" " + classes.whiteFont]: activeRoute(prop.path)
    });

      return buildListItemWithNavLink(prop, key, activePro, listItemClasses, whiteFontClasses);
  })}
</List>
);

I don't understand the problem. My goal is to create a menu with sub-menu