Random ID being passed in whenever going to a unique route with Link tag

Question

I am in the process of making a recipe app and currently, I am building a component that displays a number of recipes (depending on how much I determine via API call) within a carousel slideshow which showcases the image of recipe, title, and other info. I tried using a Link tag for a recipe to go to its own unique route (/recipe/:id) but every time it goes to that route, it never passes in the current recipe's ID that's being displayed currently in the carousel. Thank you. Edit: upon closer examination, it seems like it's only getting the ID of the last recipe object within the recipes array of objects. Any help or ideas?

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
import Slider from 'react-slick';
import { faClock, faUser, faGlobe, faUtensils } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Route, NavLink, Link } from 'react-router-dom';
import RecipeInfo from '../RecipeInfo';

const Slideshow = () => {
    const settings = {
        dots: true,
        fade: true,
        infinite: true,
        slidesToShow: 1,
        arrows: true,
        slidesToScroll: 1,
        className: 'slides',
        autoplay: true,
        speed: 2000,
        autoplaySpeed: 3300,
        centerPadding: '60px'
    };

    const [ recipes, setRecipes ] = useState([]);

    const diets = [ 'Asian', 'Greek', 'American', 'Chinese' ];
    const diet = diets[Math.floor(Math.random() * diets.length)];

    useEffect(() => {
        axios
            .get(
                'https://spoonacular-recipe-food-nutrition-v1.p.rapidapi.com/recipes/search?number=20&offset=0&type=main%20course',
                {
                    headers: {
                        'x-rapidapi-host': 'spoonacular-recipe-food-nutrition-v1.p.rapidapi.com',
                        'x-rapidapi-key': 'e7bb7cb790mshb2eb009f0d98772p1ec6e5jsnc524d12e4092'
                    },
                    params: {
                        diet: `${diet}`
                    }
                }
            )
            .then((res) => {
                setRecipes(res.data.results);
                console.log(res.data.results);
            })
            .catch((err) => {
                console.log(err);
            });
    }, []);

    return (
        <div>
            <Slider {...settings}>
                {recipes ? (
                    recipes.map((recipe) => {
                        return (
                            <div key={recipe.id}>
                                <div className="slides-container">
                                    <img
                                        className="recipe-image"
                                        width="35%"
                                        alt={recipe.title}
                                        src={`https://spoonacular.com/recipeImages/${recipe.id}-636x393.jpg`}
                                    />
                                    <div className="card-info">
                                        {' '}
                                        <Link to={`/recipe/${recipe.id}`} key={recipe.id}>
                                            <h1>
                                                {' '}
                                                <FontAwesomeIcon icon={faUtensils} /> {recipe.title}
                                            </h1>
                                        </Link>
                                            <p>Recipe Id: {recipe.id}</p>
                                        <br />
                                        <h3>
                                            <FontAwesomeIcon icon={faClock} /> Ready In: {recipe.readyInMinutes} Minutes
                                        </h3>
                                        <br />
                                        <h4>
                                            <FontAwesomeIcon icon={faUser} /> Servings: {recipe.servings}
                                        </h4>
                                        <br />
                                        <br />
                                        <a href={recipe.sourceUrl} target="_blank" rel="noopener noreferrer">
                                            <h5>
                                                <FontAwesomeIcon icon={faGlobe} /> Recipe Link
                                            </h5>
                                            {/* {recipe.sourceUrl} */}
                                        </a>
                                    </div>
                                </div>
                            </div>
                        );
                    })
                ) : (
                    <p>Loading Recipes</p>
                )}
            </Slider>
        </div>
    );
};

export default Slideshow;