I takes the right id, Its a classic details page .Details page doesn't show any data I don't know what's the issue, everything looks fine

Question

This is my Details.js page, I am trying to show the data of the selected recipe, but I get just blank spaces...I don't know how to fix it. It takes the right id, it takes me to the right page, only the data or how I take it is the problem maybe

  import "./Details.css";
import { Link, NavLink } from 'react-router-dom';
import { BrowserRouter,Route,Routes, Switch, Redirect } from 'react-router-dom';
import React, { useEffect, useLayoutEffect, useState } from 'react';
import * as recipeService from "../../../services/recipeService";


const Details = ({id}) =>  {

    const [recipe,setRecipe] = useState({});

    useEffect(() => {
        recipeService.getOne(id)
        .then(result => {
            setRecipe(result);
        })
    },[]);

    useLayoutEffect(() => {
        window.scrollTo(0, 0)
    });
    
    return (
        <div>
    <section className="sec11">
        <h1>{recipe.name}</h1>
        <article className="main">
            <article className="artsm">
                <h4>Ingredients</h4>
                <p>
                    {recipe.ingredients}
                </p>
            </article>
            <article className="artm">
                <img src={recipe.imageUrl}/>
                <hr/>
                <h4>{recipe.name}</h4>
                <p>Cooking Time: {recipe.time}</p>
                <p className="cut-text">{recipe.instructions}</p>
            </article>
            <article className="artsm">
                <h4>Instructions</h4>
                <p className="inst">
                    {recipe.instructions}
                </p>
            </article>
        </article>
        <article className="comment">
            <form className="form">
                <textarea name="comment" placeholder=" Comment..."></textarea>
                <input className="btncom" type="submit" value="Comment"/>
            </form>
        </article>
    </section>
        <section className="sec5nav">
        <ul>
            <li><Link smooth= "true" to="/"><i className="fas fa-solid fa-book-bookmark"></i></Link>Home</li>
            <li><Link smooth= "true" to="/recipes"><i className="fas fa-thin fa-bowl-rice"></i></Link>Recipes</li>
            <li><Link smooth= "true" to="/personal-list"><i className="fas fa-solid fa-list-ul"></i></Link>Your Recipes</li>
            <li><Link smooth= "true" to="/favourites"><i className="fa-solid fa-heart"></i></Link>Favourites</li>
            <li><Link smooth= "true" to="/create-recipe"><i className="fas fa-solid fa-plus"></i></Link>Add Recipe</li>
            <li><Link smooth= "true" to="/user-profile"><i className="fas fa-solid fa-user"></i></Link>Your Profile</li>
        </ul>
        <a href="#" className="to-top" id ="to-top">
    <i className="fas fa-chevron-up"></i>
  </a>
        </section>
        </div>
    );
}

export default Details;

                                                                                          

I think it has something to do with the way I fetch or set up the result, but I am new to React.js and I don't know how to resolve this issue