Не получается прокинуть index элемента внутрь компонента

есть код:

return (
    <div>
        <input onChange={event =>setIngr(event.target.value)} value={ingr}/>
        <div className={styles.container}>
          {recipes.map((recipe, index) => ( 
            <RecipeItem key = {index} recipe = {recipe.recipe} itemId = {index}/>
          ))}
        </div> 
    </div>
  )

сам компонент:

function RecipeItem ({recipe}, {itemId},) {
    console.log(itemId)
    return (
        <div className={styles.item}>
        <img className={styles.img} src={recipe.image}/>
        <div className={styles.info}>
         <h2>{recipe.label}</h2>
         <p>Ингридиенты: {recipe.ingredientLines.join(', ')}</p>
        </div>
        <Link className={styles.button} to = {`/recipe/${itemId}`} >Смотреть рецепт</Link>
       </div>
    )
}

При выводе itemId в консоль возвращает undefined, как правильно получить index внутри компонента? upd: в api нет айдишников, приходится мучаться с индексом элемента.