I'm getting Uncaught (in promise) Syntax Error: Unexpected end of JSON input. I am trying to GET the data and show it in my details page

Question

I'm getting Uncaught (in promise) Syntax Error: Unexpected end of JSON input. I am trying to GET the data and show it in my details page. The code works with newly created items, but I have previously written data in a Json file, and started the server with it, it shows the Json file data, but when I want to display its information(details page), it doesn't show and I get that error. The items I added after the npm start of my application work fine with the details page.
Here is my recipeService getOne(recipe) logic

     export const getOne = async (recipeId) => {
        return await fetch(`${baseUrl}/recipes/${recipeId}`)
        .then(res => res.json())
    }

Here is the recipeService getAll fetch method too

    export const getAll = async () => {
    let response = await fetch(`${baseUrl}/recipes`)

    let recipes = await response.json();

    let result = Object.values(recipes);

    return result;
}

This is my Details component logic

   import "./Details.css";
import { Link, NavLink, useParams,useNavigate } 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 = () =>  {

    const [recipe,setRecipe] = useState({}); 
    const {recipeId} = useParams();
    
    const recipesd = async () => {
        let reciperes =   await recipeService.getOne(recipeId);

        setRecipe(reciperes);
    };


    useEffect(() => { recipesd(recipe); },[]);



    const history = useNavigate();
    
    useLayoutEffect(() => {
        window.scrollTo(0, 0)
    });
    
    const scrollToTop = () => {
        window.scrollTo(0, 0)
    }

    return (
        <div>
    <section className="sec11">
        <h1>{recipe.name}</h1>
        <button smooth="true" className="leave" onClick={()=> history(-1)}><i class="fas fa-solid fa-xmark"></i></button>
        <article className="main">
            <article className="artsm">
                <h4>Ingredients</h4>
                <p className="ingre">
                    {recipe.ingredients}
                </p>
            </article>
            <article className="artm">
                <img src={recipe.imageUrl}/>
                <hr/>
                <h4>{recipe.name}</h4>
                <p>Cooking Time: {recipe.time}min</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>
        <button className="gob" onClick={()=> history(-1)}><i class="fas fa-solid fa-arrow-left-long"></i></button>
    </section>
        <section className="sec5navl">
        <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>
            <li><Link smooth= "true" onClick={scrollToTop} to={`/recipe-details/${recipe._id}`}><i class="fas fa-solid fa-arrow-up"></i></Link>Up</li>
        </ul>
        </section>
        </div>
    );
}

export default Details;

And thats the part of my previously defined JSON data, it gets fetched completely fine

   [
        {
            "_id": "62d6be17360d7443f08639d7",
            "name": "Caponata pasta",
            "time": "20",
            "imageUrl": "https://images.immediate.co.uk/production/volatile/sites/30/2020/08/caponata-pasta-a0027c4.jpg?resize=960,872?quality=90&webp=true&resize=375,341",
            "ingredients": "4 tbsp olive oil 1 large onion, finely chopped 4 garlic cloves, finely sliced 250g chargrilled Mediterranean veg (peppers and aubergines, if possible) from a jar, pot or deli counter, drained if in oil (you can use this oil in place of the olive oil and roughly chopped 400g can chopped tomatoes 1 tbsp small capers 2 tbsp raisins 350g rigatoni, penne or another short pasta shape bunch basil leaves, picked parmesan (or vegetarian alternative), shaved, to serve",
            "instructions": "STEP 1 Heat the oil in a large pan and cook the onion for 8-10 mins until starting to caramelise (or for longer if you have time – the sweeter the better). Add the garlic for the final 2 mins of cooking time. STEP 2 Tip in the mixed veg, tomatoes, capers and raisins. Season well and simmer, uncovered, for 10 mins, or until you have a rich sauce. STEP 3 Meanwhile, boil the kettle. Pour the kettleful of water into a large pan with a little salt and bring back to the boil. Add the pasta and cook until tender with a little bite, then drain, reserving some of the pasta water. Tip the pasta into the sauce, adding a splash of pasta water if it needs loosening. Scatter with the basil leaves and parmesan, if you like, and serve straight from the pan",
            "createdAt": "2022-07-19T14:22:15.446Z",
            "updatedAt": "2022-07-19T14:22:15.446Z"
        }
]